JSX può renderizzare qualsiasi espressione JavaScript, quindi il rendering condizionale è solo JS normale usato dentro { }.
jsx
() {
(
);
}
JSX può renderizzare qualsiasi espressione JavaScript, quindi il rendering condizionale è solo JS normale usato dentro { }.
() {
(
);
}
cond && <X/> — renderizza <X/> quando cond è truthy, altrimenti nulla. Perfetto per "mostra o nascondi".cond ? <A/> : <B/> — scegli tra due rami.null per non renderizzare nulla.&& con numeri{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Questo accade perché 0 && x valuta a 0, e React renderizza il numero 0 (ma non false/null/undefined).
Quando la logica diventa complessa, calcola l'elemento prima del return per leggibilità:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Questo mantiene JSX piatto e la logica decisionale chiara.