JSX kan gjengi ethvert JavaScript uttrykk, så betinget rendering er bare normal JS brukt inne i { }.
jsx
() {
(
);
}
JSX kan gjengi ethvert JavaScript uttrykk, så betinget rendering er bare normal JS brukt inne i { }.
() {
(
);
}
cond && <X/> — gjengi <X/> når cond er truthy, ellers ingenting. Flott for "vis eller skjul".cond ? <A/> : <B/> — velg mellom to grener.null for å ikke gjengi noe i det hele tatt.&& med tall{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Dette skjer fordi 0 && x evalueres til 0, og React gjengi tallet 0 (men ikke false/null/undefined).
Når logikken blir kompleks, beregn elementet før return for bedre lesbarhet:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Dette holder JSX flat og beslutningslogikken klar.