2
export function BotaoMenuLink(props: Props) {

  return (
    <>

      <div className="">


        <a type="button" onClick={BotaoToggli} className="bg-blue-700 hover:bg-blue-800  h-10 w-10 rounded-full " >
          <div className="flex pt-3"></div>

        </a>
      </div>
    </>
  );
}

e esta é a função

export function BotaoToggli(props: Props) {

  return (
    <>
    <div  className="px-2 pt-2 pb-4">
      <a  className="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">List your property</a>
      <a  className="mt-1 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Trips</a>
      <a  className="mt-1 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Messages</a>
    </div>
    </>
  );
}

Gostaria - resumidamente - chamar a div de baixo ao clicar na div de cima. Parecido com o Toggle, mas, eu não sei como fazer a referida função em type Script, apenas html no React. Isso são componentes do react que eu estou aprendendo a fazer. Dicas de como melhorar esse componente são bem vindas.Semelhante a essa imagem.

inserir a descrição da imagem aqui

2
  • Sua pergunta não está clara, mas percebi que você colocou um componente funcional como sendo o onClick de uma âncora. Você quer que apareça/suma o BotaoToggli sempre que clicar na âncora? Commented 14/10/2020 às 19:04
  • Peço desculpas Rafael,mas acabei de editar a postagem e inclui uma imagem. Sim, semelhante a função show() hide() que em java Script eu sei fazer, mas em react não. Commented 14/10/2020 às 19:13

1 Resposta 1

3

Você vai ter que usar o hook useState pra isso, para poder ter um estado de variável dentro de um componente funcional, então você altera essa variável bit e mostra ou não mostra o componente, segue exemplo:

import React, {useState} from 'react'
import BotaoToggli from '...../BotaoToggli'

export function BotaoMenuLink(props: Props) {
    const [togg, setTogg] = useState(false);
    return (
        <>
            <div className="">
                <a type="button" onClick={() => setTogg(!togg)} 
                    className="bg-blue-700 hover:bg-blue-800  h-10 w-10 rounded-full"
                >
                    <div className="flex pt-3"></div>
                </a>
            {
                togg ? <BotaoToggli /> : null
            }       
      </div>
    </>
  );
}
1
  • Muito obrigado pelo seu apoio, você me ajudou muito. Commented 14/10/2020 às 19:40

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 .