React Conditional Rendering In React, we can render multiple components on the basis of certain conditions or on the basis of the state of the application. A component in ReactJS thus decides which elements to return depending on one or more conditions. Conditional rendering in React is the same as the conditions in JavaScript. There are various ways for conditional rendering in ReactJS.

if: It is the easiest way of conditional rendering in ReactJS. It returns the element to be rendered if the condition is true.

Example:

function Msg1(props) {  
return 
Hello!
;  
}  
function Msg2(props) {  
return 
How are you?
;  
}  
function SignUp(props) {  
const isLoggedIn = props.isLoggedIn;  
if (isLoggedIn) {  
return ;  
}  
return ;  
}  
ReactDOM.render(  
,  
document.getElementById('root')  
);  

Logical && operator: It returns the element right after && if the condition is true. It ignores and skips if the condition is false.

Syntax:

{  
    condition &&  expression
}  

Example:

import React from 'react';   
import ReactDOM from 'react-dom';   
function Example()   
{   
return(
   
{   
(100 > 99) && alert('Alert!!!')  
}   
   
);   
}   

Ternary operator: It is used to act as a concise if-else statement, for cases where two blocks alternate given a certain condition. Here, the true statement will be rendered, if the condition is true, and if it is false, the false statement will be rendered.

Syntax:

condition?  true: false  

Example:

render() {  
const isLoggedIn = this.state.isLoggedIn;  
return (  
  
Welcome {isLoggedIn ? 'Apply for further processing.' : 'You are not logged in.'}.  
  
);  
}  

Switch case operator: It is used for multiple conditional renderings.

Example:

function Msg({ text}) {  
switch(text) {  
case 'Hello':  
return ;  
case 'Hello World':  
return ;  
default:  
return null;  
}  
}  

Conditional Rendering with enums: It is also used a multiple conditional rendering, same as Switch case, however, it is more readable as compared to switch case operator, and thus is perfect to use for mapping between different state, and for mapping in more than one condition.

Example:

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

Please follow and like us: