React » Conditional rendering

It might happen that you want to display elements only when certain condition is met or show/hide some elements when an event occurs. This is called conditional rendering.
Example, suppose a file is being downloaded, you see a message Downloading… , consider this as Downloading component. When the file download is complete, you see the message Downloaded, consider this as Downloaded component.
Thus, when the file is being downloaded, Downloading component is displayed while Downloaded component is not. When the file download finishes, Downloaded component is displayed while Downloading component is not.
Conditional rendering can be performed using if condition, inline if with conditional && operator and inline if with ternary operator.
In this section, you will learn how to do that in a react application using all three techniques.
Using if condition
Conditional rendering using if condition can be used when a component is created using javascript functions. A component can then be displayed when the condition given in if stands true.
Example, below code creates three components namely Downloading component, Downloaded component and DownloadStatus component. Downloading and Downloaded components display the status of some download while DownloadStatus component displays either of these based on an if condition.
DownloadStatus itself is not displayed, its task is to render appropriate component.

import React from 'react';
import ReactDom from 'react-dom';

// downloading component
function Downloading() {
    return <h1>Downloading...</h1>
}

// downloaded component
function Downloaded() {
    return <h1>Downloaded</h1>
}

// download status component
function DownloadStatus(props) {
    // check the status of downloading
    const isDownloading = props.isDownloading;
    // render appropriate component
    if(isDownloading){
        return <Downloading/>;
    }
    return <Downloaded/>;
}
// render DownloadStatus component 
// This component will render appropriate component
ReactDom.render(<DownloadStatus isDownloading={false}/>, 
               document.getElementById('root'));
// change isDownloading to true for displaying other component

Using inline if with && operator
This approach uses javascript’s logical && operator evaluation with a boolean and other data type. Whenever a javascript expression contains a logical && operator between a boolean true and some other data type, the result is the other data type(or the value at the right of &&). Example,

Thus, when a boolean(or a condition which returns a boolean) is used with a JSX expression along with an && operator, the result is the JSX expression if the boolean value is true. In order for this to work, the entire boolean condition, && operator and the JSX expression need to be enclosed between curly braces({ and }).
This approach can be utilized when the components are created as classes. Example,

import React from 'react';
import { Component } from 'react';


class Downloader extends Component {
    state = {
        isDownloading: false
    };

    render() {
        const isDownloading = this.state.isDownloading;
        // render elements based on the value of variable
        return (<div>
            {isDownloading && <h1>Downloading...</h1>}
            {!isDownloading && <h1>Downloaded</h1>}
            </div>);
    }
}
export default Downloader;

Above example contains two expressions enclosed between { and }. Each condition has a boolean variable isDownloading followed by JSX expression with the && operator in between. JSX expression for which isDownloading variable is true is returned and rendered.
Using ternary operator
This method is based on javascript’s ternary operator which is represented as

Condition returns boolean true or false. If the condition evaluates to true, then the expression after ? is returned. If the condition evaluates to false, then the expression after : is returned.
This approach has an advantage that you can return one of two expressions in a single statement as compared to other two approaches which required two different statements to return different expressions. In other words, this approach works like an if-else condition.
In react, this entire expression is enclosed between { and }.

import React from 'react';
import { Component } from 'react';


class Downloader extends Component {
    state = {
        isDownloading: true
    };

    render() {
        const isDownloading = this.state.isDownloading;
        return (<div>
            {isDownloading ? <h1>Downloading...</h1> : <h1>Downloaded</h1>}
            </div>);
    }
}
export default Downloader;

Notice how two different JSX expressions are returned in the same condition. When the value of isDownloading variable is true, expression <h1>Downloading…</h1> is returned. When the value of isDownloading variable is false, expression  <h1>Downloaded</h1> is returned.