Conditional Rendering

The Magic Light Switch: Conditional Rendering in React

The Story of the Magical Room

Imagine you have a magic room that can change what’s inside based on simple rules. When it’s daytime, the room shows a sunny window. When it’s nighttime, it shows stars and a moon. This is exactly what conditional rendering does in React!

Conditional rendering = Showing or hiding things based on a condition (like a light switch!)

🎯 What is Conditional Rendering?

Think of it like this:

IF it's raining → Show umbrella
IF it's sunny → Show sunglasses

In React, we decide what to show based on what’s true or false.

// If logged in, show "Hello!"
// If not logged in, show "Please sign in"

🔀 Four Magic Spells (Conditional Patterns)

React gives us four different ways to make these decisions. Let’s learn each one!

1. Short-Circuit Rendering (The Quick Check)

The Simple Idea

Imagine a door that only opens if you have the key.

• Have key? Door opens, you see inside.
• No key? Nothing happens. Door stays closed.

How It Works

The && symbol means “and then”:

{hasKey && <p>Welcome inside!</p>}

Translation: “If hasKey is true, THEN show the message.”

Real Example

function Notification({ count }) {
  return (
    <div>
      {count > 0 && (
        <span>You have {count} messages!</span>
      )}
    </div>
  );
}

What happens:

• If count = 5 → Shows “You have 5 messages!”
• If count = 0 → Shows nothing at all

When to Use

Use short-circuit when you want to:

• Show something OR show nothing
• It’s an all-or-nothing choice

graph TD
    A["Check condition"] --> B{Is it true?}
    B -->|Yes| C["Show the content"]
    B -->|No| D["Show nothing"]

2. Ternary Expressions (The Either-Or Choice)

The Simple Idea

Imagine a two-way sign:

• Turn LEFT → Go to the park
• Turn RIGHT → Go to the store

You must pick ONE. Always.

How It Works

The ? and : make a choice between two things:

{isHappy ? <span>😊</span> : <span>😢</span>}

Translation: “If happy, show smile. Otherwise, show sad face.”

Real Example

function LoginButton({ isLoggedIn }) {
  return (
    <button>
      {isLoggedIn ? "Logout" : "Login"}
    </button>
  );
}

What happens:

• If isLoggedIn = true → Button says “Logout”
• If isLoggedIn = false → Button says “Login”

The Formula

condition ? showThisIfTrue : showThisIfFalse

Like asking: “Yes or No?” — and each answer shows something different.

graph TD
    A["Check condition"] --> B{True or False?}
    B -->|True| C["Show Option A"]
    B -->|False| D["Show Option B"]

When to Use

Use ternary when you need:

• Two different things to show
• Always show SOMETHING (never blank)

3. Early Returns (The Bouncer at the Door)

The Simple Idea

Imagine a bouncer at a club:

• No ticket? “Sorry, go home!” (immediately)
• Has ticket? “Come in and enjoy!”

The bouncer stops you early if you don’t belong.

How It Works

Check first. Leave early if needed:

function ClubEntrance({ hasTicket }) {
  // Bouncer checks first!
  if (!hasTicket) {
    return <p>Sorry, no entry!</p>;
  }

  // If you're still here, welcome!
  return <p>Welcome to the party!</p>;
}

Real Example: Loading Screen

function UserProfile({ isLoading, user }) {
  // Check 1: Still loading?
  if (isLoading) {
    return <p>Loading...</p>;
  }

  // Check 2: No user found?
  if (!user) {
    return <p>User not found</p>;
  }

  // All good! Show profile
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

The Power of Early Returns

Each if statement is like a checkpoint:

graph TD
    A["Start"] --> B{Loading?}
    B -->|Yes| C["Show loader & STOP"]
    B -->|No| D{User exists?}
    D -->|No| E["Show error & STOP"]
    D -->|Yes| F["Show profile"]

When to Use

Use early returns when:

• You have multiple conditions to check
• You want clean, readable code
• Each condition has a different result

4. Combining Patterns (Mix and Match!)

The Simple Idea

You can use all patterns together, like mixing colors to paint!

Real Example: Smart Message Box

function MessageBox({ messages, isLoggedIn }) {
  // Early return: Not logged in?
  if (!isLoggedIn) {
    return <p>Please log in first</p>;
  }

  return (
    <div>
      {/* Short-circuit: Has messages? */}
      {messages.length > 0 && (
        <p>You have mail!</p>
      )}

      {/* Ternary: Show count or empty */}
      {messages.length > 0
        ? <span>{messages.length} new</span>
        : <span>No messages</span>
      }
    </div>
  );
}

🎨 Quick Comparison

🌟 The Big Picture

function MagicRoom({ time, hasKey, isVIP }) {
  // Early return: No key? Go away!
  if (!hasKey) {
    return <p>You need a key!</p>;
  }

  return (
    <div>
      {/* Ternary: Day or Night? */}
      {time === "day"
        ? <p>☀️ Sunny room</p>
        : <p>🌙 Starry room</p>
      }

      {/* Short-circuit: VIP bonus */}
      {isVIP && <p>🎁 Special gift!</p>}
    </div>
  );
}

💡 Remember

1. Short-circuit (&&) = Show it or don’t
2. Ternary (? :) = Pick one of two
3. Early return = Check and exit if needed
4. Mix them = Build amazing UIs!

You now have the power to make your React apps smart and responsive. The UI changes based on what’s happening — just like magic! ✨