ReactJS - How to Use Conditional Rendering in JSX
In this article, see several ways to use conditionals while rendering HTML or components in JSX.
Join the DZone community and get the full member experience.
Join For FreeIntroduction
In this post, I will show several ways to use conditionals while rendering HTML or components in JSX.
Consider we have a component and based on a boolean flag we want to show or hide a paragraph <p>
Below is a small component which receives props having book name and author name. Let's not concentrate on how the whole app works. We want to focus on conditional rendering.
xxxxxxxxxx
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>
)
}
}
Objective
Let's include a button in this component, and on click, lets toggle show or hide a paragraph.
Method-1 - Using Inline Boolean Condition
xxxxxxxxxx
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 the component’s state. In render() method, we are checking that boolean flag and showing the paragraph if this flag is true. Simple enough.
Method-2 - Using Ternary Operator
xxxxxxxxxx
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>
)
}
}
The rest of the code is the same. Note the ternary operator which is quite easy to understand.
Method-3 - By Using a Function
We can define a method(function) in the component which will take this decision whether to show the paragraph or not.
xxxxxxxxxx
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 an ES6 arrow function, not the traditional function keyword.
I hope you like the article. Also see different ways to import ReactJS components in your ReactJS app.
Published at DZone with permission of Gorav Singal. See the original article here.
Opinions expressed by DZone contributors are their own.
Trending
-
Fun Is the Glue That Makes Everything Stick, Also the OCP
-
Measuring Service Performance: The Whys and Hows
-
How To Use the Node Docker Official Image
-
Hibernate Get vs. Load
Comments