JSX inaweza kuonyesha usemi wowote wa JavaScript, kwa hivyo uonyeshaji wa masharti ni JS kawaida inayotumiwa ndani ya { }.
jsx
() {
(
);
}
JSX inaweza kuonyesha usemi wowote wa JavaScript, kwa hivyo uonyeshaji wa masharti ni JS kawaida inayotumiwa ndani ya { }.
() {
(
);
}
cond && <X/> — onyesha <X/> wakati cond ni truthy, vinginevyo hakuna. Nzuri sana kwa "onyesha au ficha".cond ? <A/> : <B/> — chagua kati ya matawi mawili.null kwa ajili ya kutokuonyesha chochote kabisa.&& na namba{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Hii inatokea kwa sababu 0 && x inakokotwa kuwa 0, na React inaonyesha namba 0 (lakini si false/null/undefined).
Wakati mantiki inakuwa ngumu, hesabu kipengele kabla ya kurudi kwa ajili ya urahisi:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Hii inaendelea JSX kuwa gorofa na mantiki ya maamuzi kuwa wazi.