A renderização condicional permite exibir ou ocultar elementos dinamicamente com base em determinadas condições, aumentando a flexibilidade dos componentes React. Esta seção explora duas técnicas padrão de renderização condicional: o operador && e o operador ternário.

Renderização Condicional com o Operador &&

Sintaxe

O operador && no React é utilizado para renderização condicional e funciona de maneira semelhante a uma instrução if em JavaScript. Permite renderizar elementos com base em condições específicas.

condition && (<p>element</p>)

Esta técnica é frequentemente empregada quando se deseja exibir um elemento apenas se uma determinada condição for avaliada como verdadeira.

Exemplo

Vamos considerar um exemplo em que queremos notificar os alunos que foram aprovados em um exame. Se a pontuação de um aluno exceder 60 pontos, exibiremos uma mensagem de sucesso com o nome e a pontuação dele.

const Notification = (props) =>
  props.mark > 60 && (
    <p>
      {props.name} has passed the test with {props.mark} points.
    </p>
  );

O componente Notification renderiza condicionalmente um elemento de parágrafo <p> com base no valor da prop mark.

Código completo do aplicativo

A pontuação de Emily não é exibida porque está abaixo de 60pts.

Renderização condicional com o operador ternário

Sintaxe

A renderização condicional utilizando o operador ternário (? ... : ...) é outra técnica poderosa. Ela oferece uma forma concisa de renderizar elementos com base em condições.

condition ? (true_element) : (false_element)

Essa abordagem é adequada quando se deseja escolher entre dois elementos distintos com base em uma condição.

Exemplo

Considere um cenário em que queremos cumprimentar usuários de forma diferente dependendo se estão logados. O componente Greeting demonstra a renderização condicional com o operador ternário.

const Greeting = (props) =>
  props.loggedIn ? (
    <p>Welcome to the home page, {props.name}.</p>
  ) : (
    <p>Hello {props.name}, could you please log in.</p>
  );

Neste exemplo, o componente Greeting cumprimenta os usuários de maneira diferente com base no valor da prop loggedIn.

Código completo do aplicativo