React Conditional Rendering

React Conditional Rendering

In React, the working of the conditional rendering is similar to the condition works in JavaScript. We use JavaScript operators for creating elements that represent the current state, and then the React component updates the UI to match them.

There are several ways to do Conditional Rendering in React that are as follows:

• If
• Ternary operator
• Logical && operator
• Switch case operator
• Conditional Rendering with enums

if

It is the simplest way to do a conditional rendering in React. It does not apply to the total block of the component. If the condition is true, it will return the rendered element. It can be clear with the following example:

Example:

function UserLogin(props) { 
  return 
Hello World!!
; 
 } 
 function GuestLogin(props) { 
  return 
Sign Up First.
; 
 } 
 function SignUp(props) { 
  const isLoggedIn = props.isLoggedIn; 
  if (isLoggedIn) { 
  return ; 
  } 
  return ; 
 } 
 ReactDOM.render( 
  , 
  document.getElementById('root') 
 );  

Logical && Operator

It is a Logical && (AND) operator, which is also used for condition check. If you are using it with if operator, then it checks both conditions, i.e., if the first condition will true, then it will check the second condition, but if the first condition is false, then it will skip the second condition. It happens because AND (&&) operator will give you the output only when both of the conditions are true.

If you are not using it with if the operator and treat the second statement as an output statement, then, you will only get the output when your first conditional statement is true. If your conditional statement is false, then it will skip your second statement.

Example:                                                                                                                                                     

The following example will show you the use of && (AND) operator with if operator:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
class App extends React.Component
{
render()
{ if((10 > 5) && (5>4))
{
return(

 
Hello

 
); 
}
}
}
export default App; 

Output:

Another example of AND (&&) operator in which the second statement works as output statement:

import React from 'react'; 
import ReactDOM from 'react-dom';   
class App extends React.Component
{
render()
{ 
return(<div>   
{   
(8 > 4) && alert('!!!! Hello World !!!!')  
}   
</div>   
);   
}
}  
export default App; 

Output:

Ternary Operator

This operator makes the if-else statement much brief. This ternary operator is used when two alternate blocks give a particular condition.

The syntax of the ternary operator is as follows:

Syntax:

condition ? true : false 

If the condition is true, then statement1 (true statement) will beconsidered as a result, but if the condition is false, then the statement2 (false statement) will be considered as a result.

It will be clear will the following example:

Example:

• When the condition is true, it will render statement1.

import React from 'react';
import ReactDOM from 'react-dom'; 
class App extends React.Component
{
render()
{
return (
 

 {10>5 ? 'Condition is True' : 'Condition is False'}.

 
);
}
}
export default App;

                Output:

• When the condition is false, then it will render statement2.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
class App extends React.Component
{
render()
{ 
return ( 
 

 {10<5 ? 'Condition is True' : 'Condition is False'}.

 
); 
} 
}
export default App; 

Output:

Switch case Operator

This operator is used when you have multiple conditional renderings.

The example of switch case is as follows:

Example:

import React from 'react';
import ReactDOM from 'react-dom'; 
class App extends React.Component
{
render()
{ 
var i=2; 
switch(i) 
{ 
case 0: 
return 
Sunday
; 
case 1: 
return 
Monday
;
case 2: 
return 
Tuesday
;
case 3: 
return 
Wednesday
;
case 4: 
return 
Thursday
;
case 5: 
return 
Friday
;
case 6: 
return 
Saturday
;
default: 
return null; 
} 
} 
}
export default App; 

Output:

Conditional Rendering with Enums

Enums is the short word for ‘enumerations,' and a right way for the multiple conditional rendering. It provides more readability than the switch-case operator. It is a suitable option for mapping between different states and also mapping in more than one condition.

Example:

function NotificationMsg({ text, state }) { 
  return ( 
  
 
  {{ 
  info: , 
  warning: , 
  }[state]}  
  
 
  ); 
 }  

Example of Conditional Rendering

The below example will show you the use of conditional rendering.

Example:

import React, { Component } from 'react';
 // Message Component 
 function Message(props) 
 { 
  if (props.isClicked) 
  return 
!!!! Hello World !!!!
; 
  else 
  return 
!!! It is an example of Conditional Rendering in React!!!
; 
 }
 // Click Component 
 function Click(props) 
 { 
  return( 
    Click Me !!  
  ); 
 } 
 // Clicked Component 
 function Clicked(props) 
 { 
  return( 
    Clicked  
  ); 
 } 
 class App extends Component{ 
  constructor(props) 
  { 
  super(props); 
  this.handleClick = this.handleClick.bind(this); 
  this.handleClicked = this.handleClicked.bind(this); 
  this.state = {isClicked : false}; 
  } 
  handleClick() 
  { 
  this.setState({isClicked : true}); 
  } 
  handleClicked() 
  { 
  this.setState({isClicked : false}); 
  } 
  render(){ 
  return( 
  
 
  
 Conditional Rendering Example 
 
   
  { 
  (this.state.isClicked)?( 
   
  ) : ( 
   
  ) 
  } 
  
 
  ); 
  } 
 } 
 export default App;

Output:

Once the above code gets successfully compiled, you will get the following output:

After clicking the button, you will get the following output: