React

Como mostrar ou esconder elemento em React

5 de outubro de 2021

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

mostrar ou esconder elemento em React capa

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!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x