React 17 Tutorial- Conditional Rendering Tutorial With Example

React 17 Conditional Rendering Tutorial; In this tutorial, we will learn how to work with different conditional statements.

What Are Conditional Statements

Conditional Statements are used to execute various actions based on various conditions.

It can be a part of user interaction, data received by making a request, or even sometimes, we have to hide or show some aspects in our pp. This process is known as conditional rendering in React.

It’s quite simple. If a web developer is familiar with JaScript, he can perform different actions based on the specific conditional statements.

 

Table Of Contents

  1. React Conditional Rendering Examples
  2. React Add If…Else Statement In Render Method
  3. Using Ternary Operator In React
  4. React Logical And && Operator
  5. React Logical OR II Operator
  6. Switch Case Operator In React
  7. Conclusion

 

React Conditional Rendering Examples

We will start by learning how to use different conditional statements in React such as if-else, ternary operator, logical operators and switch case operators.

 

React Add If…Else Statement In Render Method

The best way to add the if-else statement inside the render method in JSX is to use the if-else statement inside the return method. We are showing the color’s name inside the return method in React. We can also show the message to the user when the color’s name is not available.

import React, { Component } from 'react';
export default class JSXComponent extends Component {
    colors = ['Red', 'Pink', 'Green', 'Blue'];
    render() {
        if (!this.colors.length) {
            return <span>Sorry, color list is empty.</span>;
        } else {
            return (
                <div>
                    {this.colors.map(item => item + ' ')}
                </div>
            );
        }
    }
}

 

Using Ternary Operator In React

If we want to find out the drinking age, we can use the ternary operator in React. The ternary operator makes conditional rendering in React extremely easy and it is far better than the if-else statement in JSX:

import React, { Component } from 'react';
export default class JSXComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            beverage: 21
        }
    }
    render() {
        return (
            <div className="row">
                {
                    (this.state.beverage === 21)
                        ? <p> Beer </p>
                        : <p> Coke </p>
                }
            </div>
        );
    }
}

 

React Logical And && Operator Example

JavaScript offers logical AND && operators which help in validating the statement using two values:

// And && operator output
true  && true;  // true
true  && false; // false
false && true;  // false
false && false; // false

Inside the render method, we are checking if the user and isAdmin both are true, then it will return the result using && logical operator in React:

import React, { Component } from 'react';
export default class JSXComponent extends Component {
    render() {
        let user = true;
        let isAdmin = true;
        let result;
        if (user && isAdmin) {
            result = 'Conditrion is truthy';
        }
        return (
            <div className="row">
                {
                    result
                }
            </div>
        );
    }
}

 

React Logical OR II Operator Example

Now, we will understand how to use the logical OR II operator in React to check the statement passed inside the render () method. The logical OR II operator returns true if either of the value is true in the conditional statement in JSX.

We can check out the output if or operator is used:

// OR || operator output
true  || true;  // true
true  || false; // true
false || true;  // true
false || false; // false
import React, { Component } from 'react';
export default class JSXComponent extends Component {
    render() {
        let user = false;
        let isAdmin = true;
        let result;
        if (user || isAdmin) {
            result = 'Conditrion is truthy';
        } else {
            result = 'Conditrion is false';
        }
        return (
            <div className="row">
                {
                    result
                }
            </div>
        );
    }
}

 

React Switch Case Operator Example

In this step, we will learn how to use switch case conditional statements in React JSX. We will understand what a switch statement is; it allows us to perform various actions based on multiple choices.

As we can see, we try to find out the current day based on JavaScript’s new Date method. We declared the switch case along with the days’ name, here based on the present-day switch case would return the current day among other days:

import React, { Component } from 'react';
export default class JSXComponent extends Component {
    render() {
        let today = new Date().getDay();
        return (
            <div>
                {(() => {
                    switch (today) {
                        case 0:
                            return today = "Sunday";
                        case 1:
                            return today = "Monday";
                        case 2:
                            return today = "Tuesday";
                        case 3:
                            return today = "Wednesday";
                        case 4:
                            return today = "Thursday";
                        case 5:
                            return today = "Friday";
                        case 6:
                            return today = "Saturday";
                        default:
                            console.log('default');
                    }
                })()}
            </div>
        );
    }
}

 

Conclusion

Here, we have reached the end of this conditional rendering in React tutorial with real-world exampls.

Hope that all have learned how to use conditional statements properly in React JSX.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *