React 5

 

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 inStock is true, 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.