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 && em React é utilizado para renderização condicional e funciona de maneira semelhante a uma instrução if em JavaScript. Ele permite renderizar elementos com base em condições específicas.

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

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

Exemplo

Considere um exemplo em que desejamos notificar estudantes que foram aprovados em um exame. Se a pontuação de um estudante exceder 60 pontos, será exibida uma mensagem de sucesso com seu nome e nota.

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 propriedade 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. Oferece uma forma concisa de renderizar elementos com base em condições.

condition ? (true_element) : (false_element)

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

Exemplo

Considere um cenário em que se deseja cumprimentar usuários de forma diferente dependendo se estão conectados. 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

Nota

Embora ambas as técnicas realizem a renderização condicional, é fundamental compreender suas diferenças. O operador && é ideal quando se deseja renderizar um elemento apenas quando uma condição específica é atendida. Em contraste, o operador ternário é adequado para casos em que é necessário escolher entre dois elementos distintos com base em uma condição.