Instruções

Passo 5

Agora que você criou a variável de estado isVisible, é hora de começar a usá-la. Nas lições anteriores, você aprendeu sobre renderização condicional inline que permite mostrar conteúdos diferentes com base em uma determinada condição. É um padrão comum usar o operador lógico AND (&&) para renderizar condicionalmente um trecho de texto assim:
function Notification({ message }) {
  return (
    <div>
      {message && <p>{message}</p>}
    </div>
  );
}
Neste exemplo, o elemento de parágrafo será exibido somente se a mensagem for verdadeira. Lembre-se que "truthy" se refere a qualquer valor que avalia para true em um contexto Booleano. Para esta etapa, você precisará renderizar condicionalmente o elemento de parágrafo. Quando feito corretamente, você deve ver que o parágrafo não está mais visível na página.

O que fazer:

Testes:

  • Você deve renderizar condicionalmente o parágrafo para que ele apareça somente quando `isVisible` for `true`. Consulte o exemplo novamente se precisar de ajuda.

Preview