React Conditional Render

In this article, You will learn the React Conditional Render to render components based on specific conditions.

I hope, you have already read the conditional statement like if-else, if-elseif-else, & switch in core JavaScript. So, Here You will use those all statements in different ways But their concept will be the same.

Before getting started, you should have at least a basic understanding of the following topics –

Create React App Project Step by Step

React Render methods

React Components – Function & class

React Hooks with Example

Conditional Rendering in React Js

Conditional Rendering provides a feature to render components based on conditions that work the same in core javascript.

You can only define conditions within the class or functional component not within react element or JSX.

There the four main conditional statements & operators that are frequently used in React Js –

• If Statement
• if-else statement
• Inline Logical && operator
• Inline Ternary Operator

So, Now, let’s understand the working & concept of all the above statements one by one from the next steps.

Render with if statement

The component will be rendered if the condition of the if statement is true.

Example –

In this example, will see if the user is logged in then the User component will be rendered otherwise Guest user will be rendered. So, In this case, we will apply a condition with the if statement.

File Name – Guest.js

import React from "react";
function Guest(){

return(
  <React.Fragment>
   <h3>Welcome Guest</h3>
   <button>Login></button>
   <button>Signup</button>
  </React.Fragment>
);
}
Export default Guest;

File Name – User.js

import React from "react";
function User(){

return(
  <React.Fragment>
   <h3>Welcome User</h3>
   <button>Logout</button>
  </React.Fragment>
);
}
Export default User;

File Name – App.js

import React from "react";
import User from "./User";
import Guest from "./Guest";
function App(){

 let isLoggedIn = "true";
 if(isLoggedIn){
  return <User />
 }
  return <Guest />
}
Export default App;

File Name – index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, 
document.getElementById("root"))

Render with if-else statement

In the case of if Statement, If conditions are true then the if-block will render components and if conditions are false then else-block will render other.

Example –

In this example, We will see If we click the login button then It render to the User component and If we click the logout button then It will be rendered to the Guest Component.

File Name – Guest.js

import React from "react";
class Guest extends React.Component{

render(){
return(
  <React.Fragment>
   <h3>Welcome Guest</h3>
   <button onClic={props.clickLogin}>Login></button>
   <button>Signup</button>
  </React.Fragment>
);
}
}
Export default Guest;

File Name – Users.js

import React from "react";
class User extends React.Component{

render(){
return(
  <React.Fragment>
   <h3>Welcome {props.fullName}</h3>
   <button onClick={props.clickLogout}>Logout</button>
  </React.Fragment>
);
}
}
Export default User;

File Name – App.js

import React from "react";
import { useState } from "react";
import User from "./User";
import Guest from "./Guest";
function App(){
 
 let [isLoggedIn, setIsLoggedIn]= useState("true");
 let login = ()=>{
    setIsLoggedIn("true");
 } 
 let logout = ()=>{
   setIsLoggedIn("false");
} 
 if(isLoggedIn){
  return <User fullName="Noor Khan" clickLogout={logout} />
 }else{
  return <Guest clickLogin={login} />
}
}
Export default App;

Render with inline if statement

If you need to use if statement within the JSX/react element, Then you can use inline if statement that allows us to write conditional expressions with the && operator within the curly bracket {}.

Syntax –

condition && <componentName />

• If the condition is true, then It will render the component,
• If the condition is false then It will not render the component

Example –

In this example, we will see, If the value of isLoggedIn is true then It will render the User component and If Its value is false then It will not render the User component.

import React from "react";
import User from "./User";
import Guest from "./Guest";
function App(){
 let isLoggedIn = "true";
 <React.Fragment>
  <h3>Online Users</h3>
  isLoggedIn && <User />
 </React.Fragment>
}
Export default App;

Render with inline if-else statement

If you need to use an if-else statement within the JSX/react element, Then you can use the inline if-else statement that allows us to write conditional expressions with the ternary operator within the curly bracket {}.

Syntax

conditon ? <ComponentName1 /> : <ConditionName2 />

• If the condition is true, then It will render the <componentName1 />,
• If the condition is false then It will not render the <componentName2 />

Example

In this example, We will see, If the value of isLoggedIn is true, It will render the User component and If its value is false then It will render the Guest component.

import React from "react";
import User from "./User";
import Guest from "./Guest";
function App(){
 let isLoggedIn = "true";
 <React.Fragment>
  <h3>Online Users</h3>
  isLoggedIn ? <User /> : <Guest />
 </React.Fragment>
}
Export default App;

What Next –

I have tried to explain React conditional Render in a simple way. I hope you have completely understood its concept. Now, I will share articles for React Lists as soon as possible.

If You need to know more about React Conditional Render then click here to read its official docs