Lesson 7 — Conditional UI

Show different things for different state

JSX can choose what to show with the ternary operator condition ? a : b ("if condition then a, else b"). Put it inside curly braces. !on means "the opposite of on", so setOn(!on) flips true ↔ false.

<p>Door is {open ? "open" : "closed"}</p>

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: logged-in vs logged-out, open vs closed — most UI depends on a condition.