JSX voi renderöidä mitä tahansa JavaScript lauseketta, joten ehdollinen renderöinti on vain tavallista JS:ää käytettynä { } sisällä.
jsx
() {
(
);
}
JSX voi renderöidä mitä tahansa JavaScript lauseketta, joten ehdollinen renderöinti on vain tavallista JS:ää käytettynä { } sisällä.
() {
(
);
}
cond && <X/> — renderöi <X/> kun cond on tosi, muuten mitään. Loistava "näytä tai piilota" -tilanteisiin.cond ? <A/> : <B/> — valitse kahden haaran välillä.null jotta mitään ei renderöityisi.&& numeroiden kanssa{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Tämä tapahtuu koska 0 && x arvioidaan arvoksi 0, ja React renderöi numeron 0 (mutta ei false/null/undefined).
Kun logiikka muuttuu monimutkaiseksi, laske elementti ennen returnia luettavuuden vuoksi:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Tämä pitää JSX:n litteänä ja päätöslogiikan selkeänä.