Como exibir ou esconder elemento no React JS

Neste artigo você aprenderá a como exibir ou esconder elemento no React JS, uma ação muito importante para os projetos web!

Fala programador(a), beleza? Bora aprender mais sobre React!

React JS é uma biblioteca JavaScript poderosa para construir interfaces de usuário ricas e interativas.

Uma das funcionalidades que o React facilita é a exibição e ocultação de elementos com base em certas condições.

Neste artigo, você aprenderá algumas maneiras de exibir ou esconder elementos em um aplicativo React.

Uso do Estado

A maneira mais comum de mostrar ou esconder um elemento no React é usando o estado do componente.

Vejamos um exemplo usando os hooks de estado do React.

import React, { useState } from 'react';

const ToggleComponent = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      {isVisible && <p>Estou visível!</p>}
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Ocultar' : 'Mostrar'}
      </button>
    </div>
  );
}

export default ToggleComponent;

Neste exemplo, definimos um estado isVisible que determina se o parágrafo é mostrado ou não.

O botão alterna o estado isVisible sempre que é clicado, mostrando ou ocultando o parágrafo.

Uso do CSS

Outra maneira de mostrar ou ocultar um elemento no React é manipulando o CSS do elemento.

A propriedade display é comumente usada para isso.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

import React, { useState } from 'react';

const CssToggleComponent = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <p style={{ display: isVisible ? 'block' : 'none' }}>Estou visível!</p>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Ocultar' : 'Mostrar'}
      </button>
    </div>
  );
}

export default CssToggleComponent;

No exemplo acima, nós estamos alterando diretamente a propriedade display do elemento baseado no estado isVisible.

Embora este método seja direto, ele pode não ser a melhor opção quando você tem animações ou transições, pois a alteração da propriedade display é abrupta e não pode ser animada.

Uso do operador ternário

Também é possível usar o operador ternário do JavaScript para mostrar ou esconder elementos baseados em certas condições.

Isso pode ser especialmente útil quando você quer alternar entre dois elementos diferentes.

import React, { useState } from 'react';

const TernaryToggleComponent = () => {
  const [isFirstVisible, setIsFirstVisible] = useState(true);

  return (
    <div>
      {isFirstVisible ? <p>Primeiro parágrafo visível!</p> : <p>Segundo parágrafo visível!</p>}
      <button onClick={() => setIsFirstVisible(!isFirstVisible)}>
        Alternar parágrafos
      </button>
    </div>
  );
}

export default TernaryToggleComponent;

Neste exemplo, estamos alternando entre a exibição de dois parágrafos diferentes com base no estado isFirstVisible.

Aplicando Transições ao Exibir ou Ocultar Elementos

Se você deseja adicionar alguma suavidade ou animações ao exibir ou ocultar elementos, CSS Transitions é o caminho a seguir.

No entanto, como mencionado anteriormente, as mudanças no display não podem ser animadas.

Em vez disso, você pode usar a propriedade opacity.

import React, { useState } from 'react';

const AnimatedToggleComponent = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <p style={{ opacity: isVisible ? 1 : 0, transition: 'opacity 0.5s' }}>Estou visível!</p>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Ocultar' : 'Mostrar'}
      </button>
    </div>
  );
}

export default AnimatedToggleComponent;

Neste exemplo, quando isVisible é falso, a opacidade do parágrafo se torna 0, tornando-o invisível, e quando é verdadeiro, a opacidade é 1, tornando-o visível.

O transition adiciona uma transição suave à mudança de opacidade.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Mostrar e ocultar elementos é uma parte crucial para tornar sua aplicação interativa e dinâmica.

React JS oferece várias maneiras de fazer isso com base nas necessidades do seu projeto.

Lembre-se de que, embora possa ser tentador usar CSS para ocultar e mostrar elementos, fazer isso através do estado do componente pode oferecer um controle mais granular e abrir a porta para animações mais complexas e melhores práticas de acessibilidade.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Esconder ou remover do DOM: qual a diferença?

Repara que os dois primeiros exemplos parecem a mesma coisa na tela, mas não são

No exemplo com &&, quando isVisible vira falso o parágrafo sai do DOM de verdade, o React desmonta aquele pedaço da árvore

Já no exemplo com display: 'none', o elemento continua lá, só que invisível

Bora ver na prática? Abre o inspecionar elemento do navegador e alterna o botão nas duas versões, tu vai ver o nó sumindo em uma e ficando na outra 🙂

E por que isso importa? Porque componente que desmonta perde o estado interno dele

Se dentro do bloco escondido tiver um input preenchido, um contador, um player rodando, ao desmontar tudo isso volta do zero quando reaparecer

Aí sai a regra prática:

Quer LIMPAR o que estava ali? Desmonta, com renderização condicional

Quer só tirar da vista e voltar do jeitinho que estava? Esconde com CSS

Cuidado com o && quando a condição não é booleana:

Tome cuidado com um detalhe que pega muita gente aqui

O && só funciona redondo quando a condição já é verdadeiro ou falso, tipo o isVisible do exemplo

Quando tu escreve algo como {lista.length && <p>Tem item!</p>} e a lista está vazia, o que sobra do lado esquerdo é o próprio zero, e ele acaba parando na tela

Caso apareça aquele 0 solto no meio do layout, é isso

A correção é transformar a condição em booleano antes:

[bloco de código] {lista.length > 0 && <p>Tem item!</p>}

Ou, se preferir, {Boolean(lista.length) && <p>Tem item!</p>}

Mesma coisa vale pra string vazia, beleza? Compara antes, não joga o valor cru no &&

O elemento invisível que continua clicável:

O exemplo da opacidade tem uma pegadinha que vale demais conhecer

opacity: 0 deixa o elemento transparente, só isso

Ele continua ocupando o espaço no layout e continua recebendo clique

É aquele bug chato: um botão invisível comendo o clique do botão de baixo e tu olhando pra tela sem entender nada haha

E tem o lado da acessibilidade, que quase ninguém comenta: quem navega por leitor de tela não enxerga opacidade, o conteúdo continua sendo lido normalmente

Dá pra resolver somando mais duas coisas na jogada:

[bloco de código] <p style={{ opacity: isVisible ? 1 : 0, visibility: isVisible ? ‘visible’ : ‘hidden’, transition: ‘opacity 0.5s, visibility 0.5s’ }} aria-hidden={!isVisible} > Estou visível! </p>

O visibility tira o elemento da interação e o aria-hidden avisa a tecnologia assistiva que aquilo não deve ser anunciado

E por que o visibility entra também no transition? Pra ele esperar o fade terminar antes de sumir, senão o elemento some na hora e a animação vai embora junto

E quando tem mais de duas opções?

O ternário resolve bem quando é isso OU aquilo

Mas e quando tem três, quatro estados na tela? Carregando, deu erro, deu certo, está vazio…

Aí ternário dentro de ternário vira aquele código que ninguém consegue ler depois, nem tu mesmo na semana seguinte

Uma saída bem limpa é guardar cada opção em um objeto e escolher pela chave:

[bloco de código] import React, { useState } from ‘react’

const telas = { carregando: <p>Carregando…</p>, erro: <p>Deu ruim, tenta de novo</p>, sucesso: <p>Estou visível!</p> }

const StatusComponent = () => {

return ( <div> <button onClick={() => setStatus(‘sucesso’)}>Carregar</button> </div> ) }

export default StatusComponent

Cada estado tem o bloco dele, sem pilha de ternário, e adicionar um estado novo é só somar uma chave no objeto

Se você conhece aquele switch do JavaScript, a ideia é bem parecida, só que em formato de objeto

Qual método usar em cada caso:

Bora resumir pra você não sair daqui na dúvida

Renderização condicional (&& ou ternário): é o padrão pra maioria dos casos, quando o elemento simplesmente não precisa existir enquanto está fora da tela

display: 'none': quando tu quer preservar o que já estava ali, tipo formulário meio preenchido ou aba que precisa voltar do mesmo jeito

opacity com transition: quando a entrada e a saída precisam ser suaves, sempre acompanhado de visibility e aria-hidden

E tem um ponto de performance que vale pensar: montar e desmontar um componente pesado toda hora pode custar mais que deixar ele montado e escondido

Se o toggle for muito frequente e o bloco for grande, pesa isso na balança

Agora, se o conteúdo escondido faz requisição, toca mídia ou segura dado sensível, desmontar é quase sempre a escolha certa