React has no special template syntax—use JavaScript conditionals inside JSX.
Common patterns
- Ternary —
{isLoggedIn ? <Dashboard /> : <Login />} - Logical AND —
{error && <p>{error}</p>}(beware0rendering!) - Early return — guard clauses before the main JSX in a component
- Variable assignment — compute
let content = ...then return it
Keep conditions readable
Deeply nested ternaries hurt readability. Extract subcomponents or use a small helper function when branches grow.
Self-check
- When does
{count && <Badge />}show0on screen? - When is early return preferable to a ternary in JSX?
Challenge
Loading gate
- Add a
loadingboolean prop toStatus. - Show “Loading…” when true, otherwise show the message.
Done when: toggling loading switches between spinner text and the message.