JSX kan elke JavaScript expression weergeven, dus voorwaardelijk renderen is gewoon normale JS die wordt gebruikt in { }.
jsx
() {
(
);
}
JSX kan elke JavaScript expression weergeven, dus voorwaardelijk renderen is gewoon normale JS die wordt gebruikt in { }.
() {
(
);
}
cond && <X/> — geef <X/> weer wanneer cond truthy is, anders niets. Geweldig voor "toon of verberg".cond ? <A/> : <B/> — kies tussen twee takken.null terug om niets weer te geven.&& met nummers{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Dit gebeurt omdat 0 && x wordt geëvalueerd naar 0, en React geeft het getal 0 weer (maar niet false/null/undefined).
Wanneer de logica complex wordt, bereken het element vóór de return voor leesbaarheid:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Dit houdt JSX plat en de beslissingslogica duidelijk.