Showing Things Conditionally

Render different UI depending on state using the && operator and the ternary — the pattern behind every toggle, spinner, and empty state.

Step 1 of 2

The UI depends on the data

Interfaces constantly switch between versions of themselves. Instagram shows a filled heart if you liked a post, an outline if you didn't. Gmail shows your inbox if you're logged in, a sign-in screen if you're not. While data loads, apps show a spinner, then swap in the content. This is conditional rendering: choosing what to show based on state.

Because JSX expressions are just JavaScript, you use ordinary JavaScript logic:

Logical AND (&&) — show something only when a condition is true: {isLoading && <Spinner />}. If the left side is false, nothing renders.
Ternary (? :) — choose between two options: {loggedIn ? <Logout /> : <Login />}.

Think of it this way: Conditional rendering is the bouncer at a club. isMember && <VipRoom /> — only members get shown the VIP room. over18 ? <Enter /> : <GoHome /> — everyone gets one of two outcomes.

Tip — the zero gotcha

&& is for booleans. If the left side is the number 0 — like {items.length && <List />} when the list is empty — React renders a stray 0 on the screen. Guard with a real boolean instead: {items.length > 0 && <List />}.

Learn more on MDN

React.dev — Conditional rendering