Conditional Rendering in React JS

Conditional Rendering in React: With React, you can create multiple components that encapsulate the behavior you want. It can then be rendered depending on certain conditions or application status. That is, the component determines which items to return based on one or more criteria.

In React, conditional rendering works like JavaScript conditions. React components use JavaScript operators to update and customize the UI, creating elements that represent the current state.

From the given scenario, you can understand how conditional rendering works. Consider an example of how to handle login/logout buttons. The login and logout buttons are separate components. Once the user is logged in, render the logout component and display the logout button. If the user is not logged in, render the login component and show the login button. In React, this situation is called conditional rendering.

There is more than one way to do conditional rendering in React. They are given below.

if
ternary operator
logical && operator
switch case operator
Conditional Rendering with enums

Table of Contents

If

It is the easiest way to have conditional rendering in React in the render method. It is restricted to the total block of the component. ‘If’ the condition is true, it will return the element to be rendered. It can be understood in the below example.

function UserLoggin(props) {  
  return <h1>Welcome back!</h1>;  
}  
function GuestLoggin(props) {  
  return <h1>Please sign up.</h1>;  
}  
function SignUp(props) {  
  const isLoggedIn = props.isLoggedIn;  
  if (isLoggedIn) {  
    return <UserLogin />;  
  }  
  return <GuestLogin />;  
}  
  
ReactDOM.render(  
  <SignUp isLoggedIn={false} />,  
  document.getElementById('root')  
);

Logical && Operator

This operator is used for checking the condition. If the condition is true, it will return the element right after &&, and if it is false, React will ignore and skip it.

Syntax

{  
    condition &&  
    // whatever written after && will be a part of output.  
}

We can understand the behavior of this concept from the below example.

If you run the below code, you will not see the alert message because the condition is not matching.

('techiebundle' == 'TechieBundle') && alert('This alert will never be shown!')

If you run the below code, you will see the alert message because the condition is matching.

(10 > 5) && alert('This alert will be shown!')

Example

import React from 'react';   
import ReactDOM from 'react-dom';   
// Example Component   
function Example()   
{   
    return(<div>   
            {   
                (10 > 5) && alert('This alert will be shown!')  
            }   
           </div>   
        );   
}

You can see in the above output that as the condition (10 > 5) evaluates to true, the alert message is successfully rendered on the screen.

Ternary Operator

The ternary operator is used in cases where two blocks alternate given a certain condition. This operator makes your if-else statement more concise. It takes three operands and is used as a shortcut for the if statement.

render() {  
  const isLoggedIn = this.state.isLoggedIn;  
  return (  
    <div>  
      Welcome {isLoggedIn ? 'Back' : 'Please login first'}.  
    </div>  
  );  
}

Switch Case Operator

Sometimes it is possible to have multiple conditional renderings. In the switch case, conditional rendering is applied based on a different state.

function NotificationMsg({ text}) {  
  switch(text) {  
    case 'Hi All':  
      return <Message: text={text} />;  
    case 'Hello TechieBundle':  
      return <Message text={text} />;  
    default:  
      return null;  
  }

Conditional Rendering with enums

An enum is a great way to have a multiple conditional rendering. It is more readable as compared to switch case operator. It is perfect for mapping between different state. It is also perfect for mapping in more than one condition. It can be understood in the below example.

function NotificationMsg({ text, state }) {  
  return (  
    <div>  
      {{  
        info: <Message text={text} />,  
        warning: <Message text={text} />,  
      }[state]}  
    </div>  
  );  
}

Also read | Event Handling in React JS