JSX poate reda orice expresie JavaScript, deci redactarea condițională este doar JS normal folosit în interiorul { }.
jsx
() {
(
);
}
JSX poate reda orice expresie JavaScript, deci redactarea condițională este doar JS normal folosit în interiorul { }.
() {
(
);
}
cond && <X/> — redă <X/> când cond este truthy, altfel nimic. Grozav pentru "arată sau ascunde".cond ? <A/> : <B/> — alege între două ramuri.null pentru a nu reda nimic deloc.&& cu numere{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Acesta se întâmplă pentru că 0 && x se evaluează la 0, iar React redă numărul 0 (dar nu false/null/undefined).
Când logica devine complexă, calculează elementul înainte de return pentru claritate:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Acest lucru ține JSX plat și logica deciziei clară.