0

td bem? sou iniciante em React e agora estou tentando fazer um projeto para me testar de uma loja online, atualmente estou trabalhando na navbar. eu quero que quando o usuário clique no botão, os links para as outras páginas apareçam, eu fiz a função para alterar o useState, agora só falta esconder/mostrar o elemento, como eu poderia fazer isso? Esse foi meu código:

    
    const [showLinks, setShowLinks] = useState(false)

    useEffect(() => {
        console.log('oi')
    }, [showLinks])
    
     const showItems = () => {
        if (showLinks == false) {
            setShowLinks(true)
        } 
        if (showLinks == true) {
            setShowLinks(false)
        }
    }

    return ( 
        <>
            <header className="navbar">
                <Link className="link" to="/">LojaOnline.com</Link>
                <Button onClick={ showItems }><AiOutlineMenu/></Button>
            </header> 
            <ul className="dropdown">
                <Link to='/' >Home</Link>
            </ul>
        </>
    );
}```
2
  • Quais seriam os elementos que você precisa esconder/exibir ? Não conseguir entender essa parte 18/05/2022 às 3:41
  • @BrandonMarcos obg por responder, eu preciso esconder/mostrar aquele ul com a classe dropdown 18/05/2022 às 13:37

1 Resposta 1

0

Você pode esconder/exibir de duas formar um elemento no React, vou deixar um exemplo aqui dessas duas formas.

    const [showLinks, setShowLinks] = useState(false)
        
         const showItems = () => {
           setShowLinks(!showLinks)
         }
    
        return ( 
            <>
                <header className="navbar">
                    <Link className="link" to="/">LojaOnline.com</Link>
                    <Button onClick={ showItems }><AiOutlineMenu/></Button>
                </header>
                {showLinks ? (
                  <ul className="dropdown">
                    <Link to='/' >Home</Link>
                  </ul>
                 ) : null}

                 {showLinks && (
                   <ul className="dropdown">
                    <Link to='/' >Home</Link>
                  </ul>
                 )}
            </>
        );
    }

Para esconder um elemento você precisa condicionar ele a algum valor, igual utilizar um if, por exemplo, então a condição que você tem hoje é o estado showLinks esse estado muda de verdadeiro para falso e a condição que foi adicionada seria, caso o showLinks seja verdadeiro, então exibe o elemento, caso contrário não exibe nada. O primeiro exemplo caso showLinks seja falso, o resultado será null, que basicamente não exibe nada, o segundo exemplo ele só exibe o elemento se a condição é verdadeira, caso contrário nem aparece em tela. Eu prefiro utilizar o segundo exemplo, acho mais prático e menos poluído

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .