The JSX Syntax lesson mentioned that only expressions work inside { }, not statements like if. This lesson covers the expression-based patterns React actually uses to show or hide content.
The most common pattern for "render this, or render nothing" — relies on the same short-circuit behavior from the JavaScript lesson: if the left side is falsy, JavaScript never evaluates the right side at all:
function Notification({ hasUnread }) {
return (
<div>
{hasUnread && <span className="badge">New!</span>}
</div>
);
}The 0 && trap
{count && ...} is a real, common bug: if count is 0, React renders the literal number 0 on the page, since 0 is falsy but is still a value React knows how to render — it's not the same as rendering nothing. Convert to a real boolean first: {count > 0 && ...}.
For an either/or choice — not "something or nothing" — the ternary from the JavaScript Control Flow lesson is the standard tool:
function LoginButton({ isLoggedIn }) {
return isLoggedIn ? <button>Log out</button> : <button>Log in</button>;
}For more involved logic, returning early from the component function entirely is often clearer than nesting ternaries:
function UserGreeting({ user }) {
if (!user) {
return <p>Please log in.</p>;
}
return <h1>Welcome back, {user.name}!</h1>;
}Returning null from a component renders nothing at all — no empty <div>, nothing in the DOM:
function Warning({ show, message }) {
if (!show) return null;
return <p className="warning">{message}</p>;
}