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.

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.