How do you render content conditionally in React?
Quick answer
Use JavaScript expressions: ternary (cond ? a : b), logical && for show/hide, or an early return of different JSX/null.
In detail
Because JSX is just expressions, you branch with normal operators. Use a ternary to pick between two outputs, && to render-or-nothing, and an early return for guard clauses. Watch the && trap: a falsy number like 0 is still rendered, so guard with a real boolean.
{user ? <Dashboard /> : <Login />}
{count > 0 && <Badge value={count} />} // not: count && ...
if (!data) return <Spinner />; // early return⚠️The 0 trap
count && <X/> renders '0' when count is 0. Use count > 0 && <X/>.
Why interviewers ask this: Everyday skill plus the well-known 0 rendering gotcha.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399