Conditional Rendering in React Complete Guide with Examples 2026

 

Conditional Rendering in React

Conditional Rendering is one of the most useful concepts in React. It means showing different content on the screen depending on a condition.

For example:

• If a user is logged in → show Logout
• If a user is not logged in → show Login
• If a student has passed → show Congratulations
• If a product is available → show Buy Now
• If data is loading → show Loading...

React does not have a separate if rendering tag. Instead, we use normal JavaScript conditions such as if, the ternary operator, &&, and switch to decide what should appear in the UI.

What is Conditional Rendering?

Conditional rendering means rendering a component or HTML element only when a particular condition is true.

Simple Example

Suppose we have a variable called isLoggedIn.

const isLoggedIn = true;

If isLoggedIn is true, we can display:

Welcome User

If it is false, we can display:

Please Login

The important point is that the UI changes according to the value of the condition.

1. Conditional Rendering Using if Statement

The if statement is the basic JavaScript way of checking a condition.

In React, we normally use an if statement before the JSX is returned.

Syntax

if (condition) {

    // code when condition is true

} else {

    // code when condition is false

}

Program: Using if Statement in React

import React from "react";

 function App() {

   const isLoggedIn = true;

   if (isLoggedIn) {

    return <h2>Welcome! You are logged in.</h2>;

  }

   return <h2>Please login to continue.</h2>;

}

 export default App;

 Conditional Rendering in React Output

const isLoggedIn = true;

Output

Welcome! You are logged in.

When we change it to:

const isLoggedIn = false;

Output:

Please login to continue.

How it works

React first checks the value of isLoggedIn.

If it is true, the first return statement runs.

If it is false, React reaches the second return statement.

This approach is especially useful when the condition contains more logic.

2. Conditional Rendering Using Ternary Operator

The ternary operator is useful when you want to choose between two outputs.

It is called a ternary operator because it has three parts:

1. Condition
2. Value when the condition is true
3. Value when the condition is false

Syntax

condition ? trueValue : falseValue

In JSX:

{condition ? <Component1 /> : <Component2 />}

Program: Ternary Operator in React

import React from "react";

 function App() {

   const isLoggedIn = true;

   return (

    <div>

      {isLoggedIn

        ? <h2>Welcome User</h2>

        : <h2>Please Login</h2>

      }

    </div>

  );

} 

export default App;

Output

isLoggedIn = true

Output:

Welcome User

isLoggedIn = false

Output:

Please Login

Short Explanation

{isLoggedIn ? <h2>Welcome User</h2> : <h2>Please Login</h2>}

If isLoggedIn is true, display "Welcome User"; otherwise display "Please Login".

3. Conditional Rendering Using && Operator

The && operator is useful when you want to display something only when a condition is true.

This is commonly used when there is no second output required.

Syntax

{condition && <Element />}

If the condition is true, the element is displayed.

If the condition is false, the element is not displayed.

Program: Using && in React

import React from "react";

 function App() {

   const isAdmin = true;

   return (

    <div>

      <h2>Welcome to Dashboard</h2>

       {isAdmin && <p>You have admin access.</p>}

    </div>

  );

} 

export default App;

Output

isAdmin = true;

the browser displays:

Welcome to Dashboard

You have admin access.

Now change:

const isAdmin = false;

Output

Welcome to Dashboard

The message:

You have admin access.

will not be displayed.

Why is && Useful?

Imagine you want to show a notification only when a user has unread messages.

{unreadMessages > 0 && <p>You have new messages.</p>}

If:

unreadMessages = 5;

Output:

You have new messages.

If:

unreadMessages = 0;

the message is not shown.

This makes && very convenient for small conditional UI elements.

4. Conditional Rendering Using Switch Statement

A switch statement is useful when you have multiple possible conditions.

For example, suppose a user can have different roles:

• Admin
• Teacher
• Student
• Guest

Instead of writing many if...else statements, we can use switch.

Syntax

switch (value) {

  case value1:

    // code

    break;

   case value2:

    // code

    break;

   default:

    // default code

}

Program: Switch Statement in React

import React from "react";

 function App() {

   const userRole = "student";

   switch (userRole) {

    case "admin":

      return <h2>Welcome Admin</h2>;

     case "teacher":

      return <h2>Welcome Teacher</h2>;

     case "student":

      return <h2>Welcome Student</h2>;

     default:

      return <h2>Welcome Guest</h2>;

  }

}

 export default App;

Output

const userRole = "student";

the output will be:

Welcome Student

If we change it to:

const userRole = "admin";

the output becomes:

Welcome Admin

If the value does not match any case:

const userRole = "customer";

the default case runs.

Output:

Welcome Guest

Important Point

When using switch, remember to use break when writing a normal JavaScript switch block.

However, in the React example above, each case directly returns JSX, so execution leaves the function immediately.