Como mostrar ou esconder elemento em React

Neste artigo você vai aprender a como mostrar ou esconder elemento em React, utilizando uma maneira simples com hooks

Fala programador(a), beleza? Bora aprender mais sobre modificação de estados dos elementos e também sobre React.js!

Primeiramente você precisará importar o hook useState, pois ele vai nos auxiliar e deixar o trabalho todo muito simples

A seguinte regra deve ser adicionar em seu componente:

import {useState} from 'react'

Isso vai nos permitir controlar a exibição de um elemento a algum estado específico

E também atrelar esta mudança de estado a algum evento, um clique por exemplo

Veja agora a definição do estado e também o evento:

  const [showElement, setShowElement] = useState(false)
  const showOrHide = () => setShowElement(true)
  
  return (
    <div>
      <button onClick={showOrHide}>Clique em mim</button>
      { showElement ? <p>Tô aqui</p> : null }
    </div>
  )

Criamos aqui três elementos, duas variáveis primeiramente

Uma que guarda o estado do elemento e a outro que vai alterar o estado, respectivamente: showElement e setShowElement

Depois showOrHide que é o evento que ativa a alteração de estado

Condicionado a este estado está a exibição do elemento no JSX

Veja que além do botão que dispara o evento onClick, temos uma condição ternária

Esta condição verifica showElement, se estiver true ele vai exibir o parágrafo, ou seja, nosso elemento que desejamos exibir

Se estiver false, não exibe nada, podemos aqui colocar um outro elemento para ser exibido caso seja false também

E desta forma conseguimos condicionar a exibição ou não de um elemento com React, utilizando o hook useState! 🙂

Conclusão

No artigo de hoje você aprendeu a mostrar ou esconder elemento em React

Utilizamos o hook useState, para controlar o estado do elemento que precisa ou não ser exibido

A partir de um evento é possível alterar o estado, e então exibir o elemento na tela

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!