JSX puede renderizar cualquier expresión de JavaScript, así que el renderizado condicional es simplemente JS normal usado dentro de { }.
jsx
() {
(
);
}
JSX puede renderizar cualquier expresión de JavaScript, así que el renderizado condicional es simplemente JS normal usado dentro de { }.
() {
(
);
}
cond && <X/> — renderiza <X/> cuando cond es verdadero (truthy), de lo contrario nada. Genial para "mostrar u ocultar".cond ? <A/> : <B/> — elige entre dos ramas.null para no renderizar nada en absoluto.&& con números{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Esto ocurre porque 0 && x se evalúa como 0, y React renderiza el número 0 (pero no false/null/undefined).
Cuando la lógica se vuelve compleja, calcula el elemento antes del return para mayor legibilidad:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Esto mantiene el JSX plano y la lógica de decisión clara.