JSX kan rendera alla JavaScript uttryck, så villkorlig rendering är bara vanlig JS använd inuti { }.
jsx
() {
(
);
}
JSX kan rendera alla JavaScript uttryck, så villkorlig rendering är bara vanlig JS använd inuti { }.
() {
(
);
}
cond && <X/> — rendera <X/> när cond är truthy, annars inget. Perfekt för "visa eller dölj".cond ? <A/> : <B/> — välj mellan två grenar.null för att inte rendera något alls.&& med siffror{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Detta händer eftersom 0 && x evalueras till 0, och React renderar siffran 0 (men inte false/null/undefined).
När logiken blir komplex, beräkna elementet före return för läsbarhet:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Detta håller JSX platt och beslutslogiken klar.