Renderização condicional

Mostrar coisas conforme uma condição

Muitas vezes você quer pintar algo apenas se uma condição for atendida: uma mensagem de erro, um spinner enquanto carrega, uma saudação se o usuário fez login. Como o JSX vive dentro do JavaScript, você usa as ferramentas de sempre.

O operador &&

O padrão mais comum para "mostre isto apenas se a condição for verdadeira":

function CaixaEntrada({ naoLidos }) {
  return (
    <div>
      <h1>Caixa de entrada</h1>
      {naoLidos > 0 && <p>Você tem {naoLidos} mensagens não lidas</p>}
    </div>
  );
}

Se a condição for true, o lado direito é avaliado e pintado. Se for false, o React não renderiza nada (ignora os valores false, null e undefined).

Cuidado com o 0: {lista.length && <Lista/>} pintaria um 0 na tela quando a lista está vazia, porque 0 não é true mas também não é ignorado. Use uma condição booleana clara: {lista.length > 0 && <Lista/>}.

O operador ternário ? :

Quando você quer escolher entre duas alternativas ("isto ou aquilo"), use o ternário condicao ? seVerdadeiro : seFalso:

function Acesso({ logado }) {
  return (
    <p>{logado ? "Bem-vindo de volta" : "Faça login"}</p>
  );
}

Você também pode retornar elementos completos em cada ramo:

{logado ? <Perfil /> : <Login />}

Retornar null para não renderizar nada

Um componente que retorna null não pinta absolutamente nada. É útil para ocultar um componente inteiro conforme uma condição:

function Aviso({ visivel, texto }) {
  if (!visivel) return null;
  return <div className="aviso">{texto}</div>;
}

Retornar null é perfeitamente válido e não é um erro: simplesmente diz ao React que ali não há nada para mostrar.