Renderização condicional

Interfaces mudam de acordo com o estado: usuário logado ou não, carrinho vazio ou cheio, carregando ou pronto. Em React, condições comuns do JavaScript escolhem qual JSX deve ser renderizado.

function CartSummary({ items }) {
  if (items.length === 0) {
    return <p>Seu carrinho está vazio.</p>;
  }

  return (
    <section>
      <h2>Seu carrinho</h2>
      <p>{items.length} item(ns)</p>
      {items.length >= 3 && <p>Frete grátis liberado!</p>}
    </section>
  );
}

export default function App() {
  const isLogged = true;
  const items = ['Catuaí', 'Bourbon', 'Geisha'];

  return (
    <main>
      <p>{isLogged ? 'Olá, Bruno!' : 'Entre para continuar'}</p>
      <CartSummary items={items} />
    </main>
  );
}

Use if quando a condição muda uma parte grande do retorno, ternário quando há duas alternativas curtas e && quando algo simplesmente aparece ou não.

• if: funciona bem para retornos antecipados.
• Ternário: escolhe entre duas expressões.
• &&: é útil para uma condição sem alternativa visual.

Dica: cuidado com 0 && <Componente />: o número 0 pode aparecer na tela. Prefira uma condição booleana explícita como items.length > 0.

No próximo nó, vamos renderizar vários componentes a partir de um array de dados.