React.js – Conditional Rendering

Conditional rendering is one way to make your applications interactive and dynamic. It allows you to render some element on the browser is certain conditions are met.

In the lesson, we would examine five different methods of achieving conditional rendering in React.

1. if…else Statement
2. Element Variables
3. Ternary Operator
4. Short Circuit Evaluation
5. switch Statement

1. If…else Statement

Let’s take an example. We’ll create an application that displays  the message “Welcome visitor!” if the user is not logged in. But if user is logged in, we display “Welcome Kindson!’

We maintain a boolean state called IsLoggeIn. The value of the IsLoggedIn state determines what is rendered. The complete code is given below:

import React, { Component } from 'react'

export class WelcomeUser extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             isLoggedIn: false
        }
    }
    
    render() {
        if(this.state.isLoggedIn) {
        return (
            <div> Welcome, Kindson! </div>
        )
        }
        else {
        return (
            <div> Welcome, visitor! </div>
        )
        }
    }
}

export default WelcomeUser

2. Using Element Variables

In this approach, the conditional element to display is stored in an element variable. Element variables are variables the hold JSX element. In the example below, we use an element variable message. The code shows only the render() method

render() {
    let message
    if(this.state.isLoggedIn) {
        message = <div>Welcome Kindson</div>
    } else {
        message = <div>Welcome visitor</div>
    }
    return <div>{message}</div>
}

3. Using Ternary Operator ?..:

Also called conditional operation. This is the only JavaScript operator that takes 3 operand.

• the first operand is the expression to be evaluated
• the second operand is element to display if true
• the there operand is the element to display if false

The code below shows the render method using ternary operator

    render() {
        return this.state.isLoggedIn ? 
        <div>Welcome, Kindson</div> : 
        <div>Welcome, visitor</div>
    }

4. Short Circuit Evaluation with &&

This type of evaluation is used to take an action based on only on condition. If the condition holds, then the second one is evaluated, otherwise, do nothing.

In this example, we display Welcome, Kindson if IsLoggedIn is true, else, nothing is rendered

render() {
    return this.state.isLoggedIn && <div>Welcome, Kindson</div>
}

5. Using switch Statement

The switch statement can be used to achieve results similar to the if…else…if statement. Here we specify the markup for various conditions. The switch statement works well for situation where there are several conditions to evaluate. Possibly 4 or more conditions.  The switch statement method is shown below for our example

render() {
    switch (this.state.isLoggedIn) {
        case true:
            return <div>Welcome, The Tech Pro</div>
        case false:
            return <div>Welcome, visitor</div>
        default:
            return null
    }
}

We have examined 7 ways to implement conditional rendering in react. Each method has own benefits. I would recommend you take some time to get used to each of these methods.