Chapter 5 — Conditional Rendering
🎯 Goal
Learn how to show different UI based on different conditions.
This is one of the Top 5 most-used React skills in real projects.
First, one new idea (2 minutes)
Imagine you're entering a movie theater.
The security guard asks:
"Do you have a ticket?"
If Yes → Enter.
If No → Buy a ticket.
React does the same thing.
Instead of always showing the same UI, it decides what to show.
Condition
│
▼
Is Logged In?
│ │
Yes No
│ │
Home Login
New Syntax #1 — Ternary Operator
Instead of writing:
If condition is true
show A
Else
show B
React uses:
condition ? A : B
Think of it like:
Question ?
Yes Answer
:
No Answer
Example:
const isLoggedIn = true;
export default function Home() {
return (
<>
{isLoggedIn ? <h1>Welcome</h1> : <h1>Please Login</h1>}
</>
);
}
New Syntax #2 — AND (&&)
Sometimes you only want to show something when a condition is true.
Example:
{isAdmin && <button>Delete User</button>}
Meaning:
If isAdmin is true
↓
Show button
Otherwise
↓
Show nothing
MCQs
Q1
Why do we use conditional rendering?
(A) To install packages
(B) To show different UI based on a condition
(C) To create folders
(D) To style components
✅ Answer: (B)
Mini Explanation
Real apps don't always show the same screen.
Q2
Which syntax represents a ternary operator?
(A)
condition ? A : B
(B)
condition && A
(C)
condition || A
(D)
condition = A
✅ Answer: (A)
Q3
Predict the output.
const isLoggedIn = true;
export default function Home() {
return (
<>
{isLoggedIn ? <h1>Welcome</h1> : <h1>Login</h1>}
</>
);
}
(A) Welcome
(B) Login
(C) Both
(D) Error
✅ Answer: (A)
Q4
Predict the output.
const isLoggedIn = false;
export default function Home() {
return (
<>
{isLoggedIn ? <h1>Welcome</h1> : <h1>Login</h1>}
</>
);
}
(A) Welcome
(B) Login
(C) Both
(D) Error
✅ Answer: (B)
Q5
Find the bug.
const isLoggedIn = true;
export default function Home() {
return (
<>
{isLoggedIn ? <h1>Welcome</h1>}
</>
);
}
(A) No bug
(B) Missing : something
(C) Missing export
(D) Missing return
✅ Answer: (B)
Mini Explanation
A ternary always needs both parts.
Correct:
isLoggedIn ? <h1>Welcome</h1> : <h1>Login</h1>
Q6
What does this display?
const isAdmin = true;
export default function Home() {
return (
<>
{isAdmin && <button>Delete</button>}
</>
);
}
(A) Delete button
(B) Nothing
(C) Error
(D) undefined
✅ Answer: (A)
Q7
Predict the output.
const isAdmin = false;
export default function Home() {
return (
<>
{isAdmin && <button>Delete</button>}
</>
);
}
(A) Delete button
(B) Nothing
(C) Error
(D) undefined
✅ Answer: (B)
Mini Explanation
&& only renders the right side when the left side is true.
Q8
Which code is better?
You only want to show a warning when isExpired is true.
(A)
isExpired
? <p>Expired</p>
: null
(B)
isExpired && <p>Expired</p>
(C) Both work, but (B) is shorter and more common.
(D) Neither
✅ Answer: (C)
Mini Explanation
Use && when there's nothing to show if the condition is false.
Q9
Predict the output.
const age = 20;
export default function Home() {
return (
<>
{age >= 18 ? <h1>Adult</h1> : <h1>Child</h1>}
</>
);
}
(A) Adult
(B) Child
(C) Both
(D) Error
✅ Answer: (A)
Q10
Find the bug.
const isAdmin = true;
export default function Home() {
return (
<>
isAdmin && <button>Delete</button>
</>
);
}
(A) No bug
(B) Condition should be inside {}
(C) Missing export
(D) Missing button
✅ Answer: (B)
Mini Explanation
JavaScript inside JSX must be wrapped in curly braces.
Correct:
{isAdmin && <button>Delete</button>}
Q11
Predict the output.
const stock = 0;
export default function Home() {
return (
<>
{stock > 0
? <h2>In Stock</h2>
: <h2>Out of Stock</h2>}
</>
);
}
(A) In Stock
(B) Out of Stock
(C) Error
(D) Both
✅ Answer: (B)
Q12
Which statement is true?
(A) Ternary chooses between two UI options.
(B) && always shows both sides.
(C) JSX doesn't support conditions.
(D) React only supports if.
✅ Answer: (A)
Q13
Predict the output.
const hasDiscount = true;
export default function Home() {
return (
<>
<h1>Product</h1>
{hasDiscount && <p>20% OFF</p>}
</>
);
}
(A) Product
(B) Product + 20% OFF
(C) 20% OFF only
(D) Error
✅ Answer: (B)
Q14
Find the bug.
const isLoggedIn = false;
export default function Home() {
return (
<>
{isLoggedIn ? <h1>Welcome</h1> <h1>Login</h1>}
</>
);
}
(A) No bug
(B) Missing :
(C) Missing return
(D) Missing export
✅ Answer: (B)
Q15
Predict the output.
const score = 95;
export default function Home() {
return (
<>
{score >= 50
? <h2>Pass</h2>
: <h2>Fail</h2>}
</>
);
}
(A) Pass
(B) Fail
(C) Error
(D) Nothing
✅ Answer: (A)
Q16
Interview Trap 🚨
Which code is cleaner when showing an "Admin Panel" only to admins?
(A)
isAdmin
? <AdminPanel />
: null
(B)
isAdmin && <AdminPanel />
(C) Both work, but (B) is the pattern you'll see most often.
(D) Neither
✅ Answer: (C)
Mini Explanation
When there's no "else" UI, && is simpler and easier to read.
Q17
Predict the output.
const premium = false;
export default function Home() {
return (
<>
<h1>Dashboard</h1>
{premium && <p>Premium Features</p>}
</>
);
}
(A) Dashboard
(B) Dashboard + Premium Features
(C) Premium Features
(D) Error
✅ Answer: (A)
Q18 (Hard)
You're building an e-commerce website.
Which approach is best?
(A) Always display "Out of Stock"
(B)
product.inStock
? <button>Buy Now</button>
: <button>Notify Me</button>
(C) Always display "Buy Now"
(D) Duplicate the page
✅ Answer: (B)
Mini Explanation
Real apps change the UI based on data. If a product is available, users can buy it. Otherwise, they can ask to be notified.
⭐ Chapter Summary (The 20% You'll Use Every Day)
Remember these four patterns:
1. Show one of two options
condition ? A : B
Example:
isLoggedIn
? <HomePage />
: <LoginPage />
2. Show something only when the condition is true
condition && A
Example:
isAdmin && <DeleteButton />
3. JavaScript inside JSX goes inside {}
{isLoggedIn ? <Home /> : <Login />}
4. Choose the right pattern
Two possible UIs →
? :Show-or-hide UI →
&&
This simple decision will help you write cleaner React code.
🎯 Mini Coding Challenge
Create these variables:
const isLoggedIn = true;
const isAdmin = false;
Requirements:
If the user is logged in, show:
Welcome Back
Otherwise:
Please Login
Show this button only if the user is an admin:
<button>Delete User</button>
Use both:
? :&&
🚀 Mini Real-World Project
Shopping Website
Create this data:
const products = [
{
name: "iPhone 16",
price: "$999",
inStock: true,
},
{
name: "MacBook Air",
price: "$1199",
inStock: false,
},
{
name: "AirPods Pro",
price: "$249",
inStock: true,
},
];
Render the products using map().
For each product:
Show its name.
Show its price.
If
inStockistrue, display:
Buy Now
Otherwise display:
Out of Stock
This combines everything you've learned so far:
✅ Components
✅ Props
✅
map()✅ Conditional Rendering
📈 Progress Check
You've now learned the core patterns that appear in almost every React/Next.js codebase:
✅ Components
✅ Props
✅ Rendering Lists (
map)✅ Conditional Rendering
These four concepts alone cover a large portion of everyday React UI work.
Next Chapter
When you reply "ok", we'll move to Chapter 6: Event Handling (onClick, onChange, onSubmit).
This is where your apps stop being static and start responding to user actions like button clicks, typing, and form submissions. It's a major step toward building interactive, real-world applications.