Conditional rendering

Show or hide parts of the UI with ordinary JavaScript: a ternary for either-or, && for show-if, and an early return for whole states. The clearest version names each state.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain how a ternary, && and an early return each express a condition
Render different UI for the loading, error and loaded states
Spot the {count && ...} that renders a literal 0

In practice

A few lines that show Conditional rendering doing its job.

TSX

function Orders({ status, orders }: Props) {
  if (status === "loading") return <Spinner />;
  if (status === "error") return <p role="alert">Could not load orders.</p>;
  if (orders.length === 0) return <p>No orders yet.</p>;

  return (
    <ul>
      {orders.map((o) => <li key={o.id}>{o.total}</li>)}
    </ul>
  );
}

The common mistake

Watch for

Writing {count && <Badge />} when count can be 0. The expression evaluates to 0, which React renders as a literal "0" on the page. Compare explicitly: {count > 0 && <Badge />}.

What to know first

Your roadmap puts these before Conditional rendering, unless you already know them.

Function components

How it stays learned

Once a session shows you understand Conditional rendering, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on Conditional rendering.

Validation feedback

Previous in the module← Children and composition