Conditional Rendering

Subject: React

❓ What is Conditional Rendering?

In React, conditional rendering means displaying different content or components based on a condition — just like if/else works in JavaScript.

✅ React allows you to render:

  • Entire components
  • Specific JSX elements
  • Fragments of a page

...based on current state, props, or logic.

🧠 Why Use It?

  • Show different UIs for different states (loading, error, success)
  • Protect routes/pages if user is not logged in
  • Hide or show parts of the UI based on logic

🧪 Common Real-Life Examples

ConditionWhat to Show
User is logged inShow profile
User is not logged inShow login button
API is loadingShow loading spinner
Data is availableShow content

✅ 1. Using if/else Logic Outside JSX

🚀 Try it in Compiler

🧾 Output:

🚀 Try it in Compiler

✅ 2. Using Ternary Operator

🚀 Try it in Compiler

💡 Best for short, inline conditions.

✅ 3. Using && Operator

🚀 Try it in Compiler

🔍 Renders only if condition is true.

✅ 4. Early Return in Component

🚀 Try it in Compiler

✅ Clearer than nesting conditions.

✅ 5. Conditional Component Switching

🚀 Try it in Compiler

🧠 Good for switching large UI blocks.

🧠 How React Handles It Internally

🚀 Try it in Compiler

Means:

🚀 Try it in Compiler
🚀 Try it in Compiler

Means:

🚀 Try it in Compiler

✅ Real Example: Data + Loading State

🚀 Try it in Compiler

📌 Summary Table

TechniqueUse CaseCode Example
if/elseComplex logic outside JSXif () { return A } else { return B }
Ternary OperatorInline short if/else{condition ? A : B}
&& OperatorOnly render if condition true{isLoggedIn && <LogoutButton />}
Early ReturnExit early, skip renderif (!isAdmin) return null;

👉 Check the Conditional Rendering Cheat Sheet

Next: Conditional Cheat