Conditional Rendering in React

Analogy categoryAnalogies

Introduction

Conditional rendering in React means displaying different UI output based on the current state or props of a component. Because JSX is just JavaScript, you can use standard JavaScript constructs — ternary operators, logical AND, early returns, and if/else statements outside JSX — to decide what gets rendered, without needing any special React-specific syntax.

🏏

Cricket analogy: Like a captain who decides the field placement based on the current match situation — powerplay, death overs, spin-friendly pitch — using ordinary cricketing judgment rather than any special rulebook clause just for field decisions.

Syntax

jsx

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
    </div>
  );
}

Explanation

The ternary operator (condition ? a : b) is ideal for choosing between two possible outputs. The logical AND operator (condition && <Element />) is a shorthand for rendering something only when a condition is true, and renders nothing (React ignores false, null, and undefined) when it's false. For more complex logic, it's often clearer to compute a value or return early from the component function before the main JSX, rather than nesting many ternaries inside the markup.

🏏

Cricket analogy: Like a third umpire choosing between two simple outcomes, out or not out (ternary), while a boundary review either flashes 'SIX' on the big screen or shows nothing if it's not a boundary (logical AND); for a complex multi-factor DRS review, the umpire steps away to a review room rather than shouting tangled conditions live.

Example

jsx

function Notification({ messages }) {
  if (messages === null) {
    return <p>Loading notifications...</p>;
  }

  return (
    <div>
      <h3>Notifications</h3>
      {messages.length > 0 ? (
        <ul>
          {messages.map((m) => (
            <li key={m.id}>{m.text}</li>
          ))}
        </ul>
      ) : (
        <p>No new notifications.</p>
      )}
      {messages.length > 5 && <p>You have a lot of notifications!</p>}
    </div>
  );
}

Output

If messages is null, an early return shows a loading message and skips the rest of the render. Otherwise, the component shows a list of notifications or a 'No new notifications' message depending on the array's length, and conditionally adds a warning message using && when there are more than five notifications.

🏏

Cricket analogy: Like a scoreboard that shows 'Match starting soon' and nothing else if data hasn't loaded yet (early return); once live, it shows either the ball-by-ball feed or 'No play yet today', and flashes an extra 'high-scoring match' banner only if the total climbs past a threshold.

Be careful using && with numeric values: {count && <Badge count={count} />} will render the literal '0' on screen if count is 0, since 0 is falsy but still gets rendered by React as text. Use an explicit comparison like {count > 0 && ...} instead.

Key Takeaways

Ternary operators are ideal for choosing between two JSX outputs inline.
The && operator conditionally renders an element only when the left-hand condition is truthy.
React renders nothing for false, null, and undefined, but will render 0 or empty strings as text.
Early returns before the main JSX are often clearer than deeply nested conditional expressions.
Conditional rendering uses plain JavaScript logic — no special React syntax is required.