JSX can render any JavaScript expression, so conditional rendering is just normal JS used inside { }.
jsx
() {
(
);
}
JSX can render any JavaScript expression, so conditional rendering is just normal JS used inside { }.
() {
(
);
}
cond && <X/> — render <X/> when cond is truthy, otherwise nothing. Great for "show or hide".cond ? <A/> : <B/> — choose between two branches.null to render nothing at all.&& with numbers{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
This happens because 0 && x evaluates to 0, and React renders the number 0 (but not false/null/undefined).
When logic gets complex, compute the element before the return for readability:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
This keeps JSX flat and the decision logic clear.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate