ReactJS - How to use conditionals in render JSX

June 23, 2020

Introduction

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>
        )
    }
}

Objective

Lets include a button in this component, and on click lets toggle show or hide a paragraph.

Method-1 - Using inline boolean condition

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.

Method-2 - Using Ternary Operator

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.

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.

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.

reactjs