Conditional Rendering

Real interfaces in the React for Beginners series hide, swap and reveal elements depending on the situation: a spinner while loading, a login form when signed out, a badge only for admins. Because JSX is JavaScript, you already own every tool you need — if, the ternary operator, logical && — and this chapter shows where each one fits.

The && guard

When something should render only when a condition is true, put the condition and the markup on either side of &&. If the condition is false, React renders nothing:

function Notice({ unread }) {
  return (
    <div>
      <p>Inbox</p>
      {unread > 0 && <span className="badge">{unread} new</span>}
    </div>
  );
}

Expected output: with unread = 3 the badge shows 3 new; with unread = 0 no badge element exists at all — not an empty badge, nothing.

One trap to memorise: && renders the left operand's value when it is truthy. {count && count} with count = 0 prints 0 on the page, because 0 is a renderable value. Guard with an explicit comparison: {count > 0 && count}.

The ternary operator

When there are two alternatives — loading or data, name or fallback — the conditional (ternary) operator keeps both visible in one expression:

function Greeting({ user }) {
  return (
    <p>
      {user ? `Welcome back, ${user.name}` : 'Please sign in'}
    </p>
  );
}

Expected output: Welcome back, Ada when a user object exists, Please sign in when it is null. The shape reads left to right: condition, then value if true, then value if false.

Early returns

For whole-section decisions, an early return before the main JSX keeps the common path uncluttered — the component simply returns null, and React renders nothing for it:

function Sidebar({ visible }) {
  if (!visible) return null;

  return <aside className="sidebar">Navigation here</aside>;
}

Expected output: visible = false leaves the page with no <aside> in the DOM; true renders it normally. Use this whenever one flag would otherwise wrap the entire return value in a ternary.

Choosing a pattern

Extracting small components

When a conditional grows teeth — nested ternaries, several flags — stop nesting markup and extract. A tiny component with its own early reads beats a five-level expression every time:

function Status({ state }) {
  if (state === 'loading') return <p role="status">Loading…</p>;
  if (state === 'error') return <p className="error">Something went wrong</p>;
  return <p className="ok">Up to date</p>;
}

Expected output: one of the three messages, selected by a single prop — and callers never see the branching logic. role="status" announces loading text to screen readers, because invisible-until-changed UI should still be announced.

Conditional attributes and classes

The same techniques apply to props. A common idiom builds the className string from a condition, which you will use constantly once styling arrives in chapter 17:

<button className={isSelected ? 'tab is-active' : 'tab'}>
  {label}
</button>

Expected output: the same button element with either one class name or two — the active state toggles purely from data, with no manual class manipulation anywhere in your code.

Conditional rendering also composes with lists and effects: show a spinner while a request is in flight, swap in the results when it resolves, and render an error message if it fails. Each of those is just another branch driven by state, exactly like the patterns above.

Common mistakes

• Rendering 0 by accident — {count && …} shows a literal zero; compare explicitly.
• Assignment instead of comparison — {done = true && …} assigns in an expression and breaks; use ===.
• Deeply nested ternaries — if you cannot read it aloud, extract a component or an early return.
• Returning multiple roots — branches must each produce one element (or a fragment).
• Forgetting the false branch — a ternary without its third part yields undefined, which React never renders; harmless, but easy to misread as a bug.

Practice checklist

1. Render a badge with && for three different unread counts, including zero.
2. Build the signed-in/signed-out greeting with a ternary.
3. Convert one nested-ternary mess into an early-return component.
4. Create a status indicator that switches between loading, error and success.
5. Verify in dev tools that hidden branches leave no elements in the DOM.

One value per condition is useful — lists need the same treatment for many items. Next: Rendering Lists and Keys.