{{announcement.body}}
{{announcement.title}}

ReactJS - How to Use Conditional Rendering in JSX

DZone 's Guide to

ReactJS - How to Use Conditional Rendering in JSX

In this article, see several ways to use conditionals while rendering HTML or components in JSX.

· Web Dev Zone ·
Free Resource

Introduction

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.

JSON
 




xxxxxxxxxx
1
24


 
1
import React, { Component } from 'react'
2
 
          
3
export default class Book extends Component {
4
    constructor(props) {
5
        super(props);
6
        this.state = {
7
            show: false
8
        };
9
    }
10
 
          
11
    toggleInfo = () => {
12
        this.setState({show: !this.state.show});
13
    }
14
 
          
15
    render() {
16
        const {book, author} = this.props.info;
17
        return (
18
            <article>
19
                <h3>book: {book}</h3>
20
                <h5>author: {author}</h5>
21
            </article>
22
        )
23
    }
24
}


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

JSON
 




xxxxxxxxxx
1
29


 
1
import React, { Component } from 'react'
2
 
          
3
export default class Book extends Component {
4
    constructor(props) {
5
        super(props);
6
        this.state = {
7
            show: false
8
        };
9
    }
10
 
          
11
    toggleInfo = () => {
12
        this.setState({show: !this.state.show});
13
    }
14
 
          
15
    render() {
16
        const {book, author} = this.props.info;
17
        return (
18
            <article>
19
                <h3>book: {book}</h3>
20
                <h5>author: {author}</h5>
21
                <button type="button" onClick={this.toggleInfo}>Toggle Paragraph</button>
22
 
          
23
                {
24
                    this.state.show && <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, nobis!</p>
25
                }
26
            </article>
27
        )
28
    }
29
}


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

JSON
 




xxxxxxxxxx
1
31


 
1
import React, { Component } from 'react'
2
 
          
3
export default class Book extends Component {
4
    constructor(props) {
5
        super(props);
6
        this.state = {
7
            show: false
8
        };
9
    }
10
 
          
11
    toggleInfo = () => {
12
        this.setState({show: !this.state.show});
13
    }
14
 
          
15
    render() {
16
        const {book, author} = this.props.info;
17
        return (
18
            <article>
19
                <h3>book: {book}</h3>
20
                <h5>author: {author}</h5>
21
                <button type="button" onClick={this.toggleInfo}>Toggle Paragraph</button>
22
 
          
23
                {
24
                    this.state.show ? 
25
                    (<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, nobis!</p>)
26
                    : null
27
                }
28
            </article>
29
        )
30
    }
31
}


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.

JSON
 




xxxxxxxxxx
1
36


1
import React, { Component } from 'react'
2
 
          
3
export default class Book extends Component {
4
    constructor(props) {
5
        super(props);
6
        this.state = {
7
            show: false
8
        };
9
    }
10
 
          
11
    toggleInfo = () => {
12
        this.setState({show: !this.state.show});
13
    }
14
 
          
15
    toShow = () => {
16
        if (this.state.show) {
17
            return <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, nobis!</p>;
18
        }
19
        else {
20
            return null;
21
        }
22
    }
23
 
          
24
    render() {
25
        const {book, author} = this.props.info;
26
        return (
27
            <article>
28
                <h3>book: {book}</h3>
29
                <h5>author: {author}</h5>
30
                <button type="button" onClick={this.toggleInfo}>Toggle Paragraph</button>
31
 
          
32
                {this.toShow()}
33
            </article>
34
        )
35
    }
36
}



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.

Topics:
boolean condition, reactjs, tutorial, web dev

Published at DZone with permission of Gorav Singal . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}