⚛️ Conditional Rendering

? Quick Overview

Conditional rendering in React means showing different UI based on conditions — just like using if, ?: (ternary), or && in JavaScript. It lets you display or hide components based on state, props, or any logic in your app.

Example: show a “Login” button when the user is logged out and a “Logout” button when they are logged in.

? Key Concepts

• if / else — clear and explicit branching logic.
• Ternary ? : — short inline condition inside JSX.
• Logical AND && — render something only when a condition is true.
• Inline functions — handle more complex logic inside JSX.
• Component-level conditions — swap whole components based on roles or state.
• Multiple conditions — nested ternaries or extracted helper functions.

? Syntax & Theory

React doesn’t have a special “conditional rendering” syntax. Instead, it uses normal JavaScript expressions inside JSX:

• if / else: decide which element to return from a component.
• Ternary: inline choice between two UI fragments.
• && operator: render something only if a condition is truthy.
• Return null: to render nothing when a condition fails.

? Code Examples

1️⃣ Using if Statements

Use regular if conditions inside the component body to choose what to return.

// Using if...else to show different greetings
function UserGreeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h4>Welcome back, User!</h4>;
  } else {
    return <h4>Please log in.</h4>;
  }
}

// Usage:
<UserGreeting isLoggedIn={true} />

2️⃣ Using the Ternary Operator

For simple either/or UI, the ternary operator keeps JSX compact and readable.

// Using a ternary to choose between morning and evening text
function Greeting({ isMorning }) {
  return (
    <h4>
      {isMorning ? "Good Morning ☀️" : "Good Evening ?"}
    </h4>
  );
}

3️⃣ Using Logical AND (&&)

Render something only when a condition is true. If it’s false, React ignores the element.

// Only show the message if hasMessage is true
function Notification({ hasMessage }) {
  return (
    <div>
      {hasMessage && <p>You have a new message!</p>}
    </div>
  );
}

4️⃣ Using Inline Functions for Complex Logic

For multiple branches in a small area, an immediately invoked function expression (IIFE) can keep logic close to the JSX.

// Use an inline function to handle multiple status states
function StatusMessage({ status }) {
  return (
    <div>
      {(() => {
        if (status === "loading") return <p>Loading...⏳</p>;
        if (status === "error") return <p>❌ Something went wrong!</p>;
        return <p>✅ Data loaded successfully!</p>;
      })()}
    </div>
  );
}

5️⃣ Conditional Rendering with Components

Often you conditionally render entire components instead of small elements.

// Swap between Admin and User dashboards based on isAdmin
function AdminPanel() {
  return <h5>Admin Dashboard</h5>;
}

function UserPanel() {
  return <h5>User Dashboard</h5>;
}

function Dashboard({ isAdmin }) {
  return (
    <div>
      {isAdmin ? <AdminPanel /> : <UserPanel />}
    </div>
  );
}

6️⃣ Combining Multiple Conditions

For more than two options, you can chain ternaries — but keep an eye on readability.

// Choose a different message based on the temperature
function Weather({ temp }) {
  return (
    <p>
      {temp > 30
        ? "It's hot ?"
        : temp > 20
        ? "Nice and warm ?️"
        : "Cold day ❄️"}
    </p>
  );
}

? Live Output / Explanation