JSX pode renderizar qualquer expressão JavaScript, então a renderização condicional é apenas JS normal usado dentro de { }.
jsx
() {
(
);
}
JSX pode renderizar qualquer expressão JavaScript, então a renderização condicional é apenas JS normal usado dentro de { }.
() {
(
);
}
cond && <X/> — renderiza <X/> quando cond é truthy, caso contrário nada. Ótimo para "mostrar ou ocultar".cond ? <A/> : <B/> — escolha entre dois ramos.null para não renderizar nada.&& com números{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Isso acontece porque 0 && x avalia para 0, e React renderiza o número 0 (mas não false/null/undefined).
Quando a lógica fica complexa, calcule o elemento antes do return para melhor legibilidade:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Isso mantém JSX simples e a lógica de decisão clara.