Conditional Rendering in React

Introduction

Conditional rendering allows React applications to display different UI elements based on conditions. It works similarly to conditions in JavaScript using:

• if
• else
• ternary operators
• logical operators

Without conditional rendering, applications would not be able to create dynamic user experiences.

In this tutorial, you will learn what conditional rendering is, why it is used, syntax, methods, examples, real-life use cases, common mistakes, interview questions, and best practices.

What is Conditional Rendering in React?

Conditional rendering allows React components to render UI dynamically based on conditions.

React uses JavaScript conditions to decide:

• What to display
• When to display
• Which component should render

Why Conditional Rendering is Used?

Conditional rendering is used because modern applications need dynamic behavior.

Examples:

• Show the login button if the user is logged out
• Show the dashboard if the user is logged in
• Display a loading spinner during API requests
• Hide unavailable products
• Show error messages in forms

All these scenarios use conditional rendering.

Features of Conditional Rendering

1. Dynamic UI

Content changes automatically based on conditions.

2. Better User Experience

Users see relevant information only.

3. Flexible Rendering

Different components can render dynamically.

4. Cleaner UI Management

Conditions help organize rendering logic.

Syntax of Conditional Rendering

Basic JavaScript conditions can be used inside React.

Example

function App() {
 const isLoggedIn = true;
 return (
   <div>
     {
       isLoggedIn
         ? <h1>Welcome User</h1>
         : <h1>Please Login</h1>
     }
   </div>
 );
}

Output

If the condition is true:

If the condition is false:

Methods of Conditional Rendering in React

React supports multiple ways for conditional rendering.

Main methods:

1. if Statement
2. Ternary Operator
3. Logical AND (&&)
4. switch Statement
5. Conditional Components

1. Conditional Rendering using an if Statement

The if statement works like normal JavaScript.

Example

function App() {
 const isLoggedIn = true;
 if (isLoggedIn) {
   return <h1>Welcome User</h1>;
 }
 return <h1>Please Login</h1>;
}

Output

Advantages of the if Statement

• Easy to understand
• Best for complex conditions

2. Conditional Rendering using Ternary Operator

The ternary operator is commonly used for simple conditions.

Syntax

condition ? trueValue : falseValue

Example

function App() {
 const age = 20;
 return (
   <h1>
     {
       age >= 18
         ? "Adult"
         : "Minor"
     }
   </h1>
 );
}

Output

Advantages of Ternary Operator

• Short syntax
• Cleaner JSX
• Easy for small conditions

3. Conditional Rendering using Logical AND (&&)

Used when content should display only if the condition is true.

Example

function App() {
 const isAdmin = true;
 return (
   <div>
     {
       isAdmin &&
       <h1>Admin Panel</h1>
     }
   </div>
 );
}

Output

Advantages of Logical AND

• Very short syntax
• Useful for showing/hiding elements

4. Conditional Rendering using a switch Statement

Useful for multiple conditions.

Example

function App() {
 const role = "admin";
 switch (role) {
   case "admin":
     return <h1>Admin Dashboard</h1>;
   case "user":
     return <h1>User Dashboard</h1>;
   default:
     return <h1>Guest</h1>;
 }
}

Output

5. Conditional Component Rendering

Entire components can render conditionally.

Example

function Login() {
 return <h1>Login Component</h1>;
}
function Dashboard() {
 return <h1>Dashboard Component</h1>;
}
function App() {
 const isLoggedIn = true;
 return (
   <>
     {
       isLoggedIn
         ? <Dashboard />
         : <Login />
     }
   </>
 );
}

Real-Life Example of Conditional Rendering

Suppose you are building an e-commerce website.

Conditional rendering handles:

• Login/logout buttons
• Product stock availability
• Loading spinners
• Cart status
• Discount badges

Examples:

• “Out of Stock” label
• “Add to Cart” button
• “Loading…” message

All use conditional rendering.

Conditional Rendering with useState

Conditional rendering is commonly used with state.

Example:

function Login() {
 return <h1>Login Component</h1>;
}
function Dashboard() {
 return <h1>Dashboard Component</h1>;
}
function App() {
 const isLoggedIn = true;
 return (
   <>
     {
       isLoggedIn
         ? <Dashboard />
       : <Login />
     }
   </>
 );
}

Output

Difference Between an if Statement and a Ternary Operator

Advantages of Conditional Rendering

Common Mistakes in Conditional Rendering

1. Using if Directly Inside JSX

Wrong:

return (
 <div>
   if (true) {
     <h1>Hello</h1>
   }
 </div>
);

Correct:

• Use a ternary operator
• Use logical AND
• Use separate variables

2. Complex Nested Ternary Operators

Wrong:

condition1
 ? value1
 : condition2
 ? value2
 : value3

This reduces readability.

3. Returning Undefined

Wrong:

if (false) return;

Always return valid JSX or null.

4. Forgetting Parent Elements

Wrong:

return (
 <h1>Hello</h1>
 <p>World</p>
);

Correct:

return (
 <div>
   <h1>Hello</h1>
   <p>World</p>
 </div>
);

5. Overusing Conditional Logic

Too many conditions inside JSX make components difficult to read.

Real-World Applications of Conditional Rendering

Conditional rendering is heavily used in:

• Social media apps
• E-commerce websites
• Banking applications
• Chat applications
• Dashboards

Examples:

• Notification messages
• User authentication
• Theme switching
• API loading states
• Access control

Conditional rendering – Interview Questions

ReactJS conditional rendering – Objective Questions (MCQs)

Conclusion

Conditional Rendering is one of the most important concepts in React because it allows applications to display dynamic content based on conditions. It helps developers create interactive, flexible, and user-friendly applications.

React supports multiple approaches for conditional rendering, such as:

• if statements
• ternary operators
• logical AND operators
• conditional components

Continue Learning React