Station 10 · Conditional rendering

The conditions

A theater does not show every scene every night. Before the bell there is the curtain. After the bell there is the picture. While a reel is playing there is also a marquee announcing what is on. JavaScript decides which of those to draw with a single yes or no, written as a ternary.

Below is the stage and its small script. Flip the status to one of three values. Watch only the matching branch fire and only the matching parts get drawn.

stage.tsx — the conditional under the hood

1let status = "intermission";
2
3function Stage() {
4  return (
5    status === "intermission" ? <Curtain />
6    : status === "ready"      ? <Picture />
7    : (
8        <>
9          <Picture />
10          <Marquee />
11        </>
12      )
13  );
14}

Set the status — pick a branch

Pick a status. Only the matching branch runs; the others are not drawn at all.

(marquee not rendered)

intermission → only <Curtain />· active

ready → only <Picture />

running → <Picture /> + <Marquee />

A condition is the boat's fork in the road. status === 'intermission' draws the curtain; otherwise the picture. Branches the condition does not take are not drawn at all — the browser never sees them. That economy is the whole point.

What you just learned

A condition is a fork in the road. The code asks a yes-or-no question and follows the matching branch.
The ternary (a ? b : c) is the shortest way to write 'show b when a is true, otherwise show c' — it returns a value, so it slots straight into the markup.
The branch you do not take is never drawn. The browser never sees the markup of branches the condition skipped.
Every show-or-hide on this site — toasts, modals, the curtain itself — is one of these forks under the hood.

Next — Station 11: The parts

Right this way…