¿Cómo oculto la "sección" de mi página cuando hago clic en un botón? y mostrar que se hace clic en otro botón Aquí está mi código
import './App.css'; import Typed from 'react-typed'; import { useState, useEffect } from 'react'; function App() { return ( <div className='text-white'> <div id='index' className='index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'> <div className='flex justify-center items-center'> <h1 className='md:text-7xl sm:text-6xl text-4xl font-bold md:py-6'>Roll</h1> <Typed className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-gray-400" strings={['simply', 'design']} typeSpeed={70} backSpeed={100} loop/> </div> <p className='md:text-3xl sm:text-2xl text-xl font-bold py-4 '>best <a className='underline text-gray-300'>design</a> and <a className='underline text-gray-300'>simplistic.</a></p> <button className='bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-gray-300 hover:bg-slate-300 hover:shadow-xl hover:shadow-white hover:scale-110 '>Create</button>//clicking this button will show the div below which has the id of info and hide this current div </div> <div id='info' className='info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'> <h1>Hello</h1> </div> <div id='ino' className='info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'> <h1>Hello</h1> </div> </div> ); }¿Cómo hago que funcione el evento onClick?
Simplemente configure un state , llamémoslo, por ejemplo, hide y establecer el valor predeterminado false , y en el botón, haga clic en convertirlo en true .
Y puede ocultar condicionalmente la sección de button y mostrar la sección de info .
import "./App.css"; import Typed from "react-typed"; import { useState, useEffect } from "react"; function App() { const [hide, setHide] = useState(false); return ( <div className="text-white"> {!hide ? ( <div id="index" className="index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center" > <div className="flex justify-center items-center"> <h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6"> Roll </h1> <Typed className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-gray-400" strings={["simply", "design"]} typeSpeed={70} backSpeed={100} loop /> </div> <p className="md:text-3xl sm:text-2xl text-xl font-bold py-4 "> best <a className="underline text-gray-300">design</a> and{" "} <a className="underline text-gray-300">simplistic.</a> </p> <button className="bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-gray-300 hover:bg-slate-300 hover:shadow-xl hover:shadow-white hover:scale-110" onClick={() => setHide(true)} > Create </button> //clicking this button will show the div below which has the id of info and hide this current div </div> ) : ( <div id="info" className="info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center" > <h1>Hello</h1> </div> )} <div id="ino" className="info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center" > <h1>Hello</h1> </div> </div> ); }Deberías usar el gancho de reacción useState() .
Por ejemplo:
import './App.css'; function App() { const [visible, setVisible] = useState(true); return ( <div className='text-white' style={{display: visible ? 'block' : 'none'}}> <div> <!--first part--> <div className='flex justify-center items-center'> <h1 className='md:text-7xl sm:text-6xl text-4xl font-bold md:py-6'>Web</h1> <!--stuff here--> </div> <p>stuff here</p> <button onClick={() => setVisible(!visible)}>Create</button> <!--when i click on the button it will hide the first part(section) and show the second part --> </div> <!--first part end --> <div> <!--second part --> <h1>Hello</h1> </div> </div> ); Puede consultar más detalles sobre cómo usar el gancho useState() aquí https://reactjs.org/docs/hooks-state.html