Multithreading in Python, Lets clear the confusion between Multithreading and Multiprocessing
So, you want to run your code in parallel so that your can process faster, or…
June 23, 2020
In this post, I will show several ways to use conditionals while rendering html or component in jsx.
Consider we have a component, and based on a boolean flag we want to show or hide a paragraph
Below is a small component which receives props having book name and author name. Lets not concentrate on how the whole app works. We want to focus on conditional rendering.
import React, { Component } from 'react'
export default class Book extends Component {
constructor(props) {
super(props);
this.state = {
show: false
};
}
toggleInfo = () => {
this.setState({show: !this.state.show});
}
render() {
const {book, author} = this.props.info;
return (
<article>
<h3>book: {book}</h3>
<h5>author: {author}</h5>
</article>
)
}
}
Lets include a button in this component, and on click lets toggle show or hide a paragraph.
import React, { Component } from 'react'
export default class Book extends Component {
constructor(props) {
super(props);
this.state = {
show: false
};
}
toggleInfo = () => {
this.setState({show: !this.state.show});
}
render() {
const {book, author} = this.props.info;
return (
<article>
<h3>book: {book}</h3>
<h5>author: {author}</h5>
<button type="button" onClick={this.toggleInfo}>Toggle Paragraph</button>
{
this.state.show && <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, nobis!</p>
}
</article>
)
}
}
toggleInfo is self explanatory. We are just toggling a boolean flag in component’s state. In render() method, we are checking that boolean flag and showing the paragraph if this flag is true. Simple enough.
import React, { Component } from 'react'
export default class Book extends Component {
constructor(props) {
super(props);
this.state = {
show: false
};
}
toggleInfo = () => {
this.setState({show: !this.state.show});
}
render() {
const {book, author} = this.props.info;
return (
<article>
<h3>book: {book}</h3>
<h5>author: {author}</h5>
<button type="button" onClick={this.toggleInfo}>Toggle Paragraph</button>
{
this.state.show ?
(<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, nobis!</p>)
: null
}
</article>
)
}
}
Rest of the code is same. Note the ternary operator which is quite easy to understand.
We can define a method(function) in the component which will take this decision whether to show the paragraph or not.
import React, { Component } from 'react'
export default class Book extends Component {
constructor(props) {
super(props);
this.state = {
show: false
};
}
toggleInfo = () => {
this.setState({show: !this.state.show});
}
toShow = () => {
if (this.state.show) {
return <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, nobis!</p>;
}
else {
return null;
}
}
render() {
const {book, author} = this.props.info;
return (
<article>
<h3>book: {book}</h3>
<h5>author: {author}</h5>
<button type="button" onClick={this.toggleInfo}>Toggle Paragraph</button>
{this.toShow()}
</article>
)
}
}
These three methods are simple to use, and you can use anyone.
Note: If you are having confusion that I did not use bind on the extra function I defined. Notice that I’m using ES6 arrow function, not the traditional function keyword.
So, you want to run your code in parallel so that your can process faster, or…
Lets implement a command shell by using a command dispatcher. The objective is…
Introduction While this topic may applicable to all mysql/mariadb users who…
Problem Statement I have a parent component which loads some list categories…
Introduction In this post, we will see how to theme form and its fields…
Agenda I will cover following in this post: Prepare Docker image for Next.js app…
Introduction This post has the complete code to send email through smtp server…
Introduction In a normal email sending code from python, I’m getting following…
Introduction In one of my app, I was using to talk to . I have used some event…
Introduction So you have a Django project, and want to run it using docker image…
Introduction It is very important to introduce few process so that your code and…
Introduction In this post, we will see a sample Jenkin Pipeline Groovy script…