En pocas palabras, estoy creando un estudio de caso para un trabajo potencial, el empleador quiere que use una aplicación React para crearlo...
Quiero crear un botón que tenga la función de inicio que:
Oculta el contenido original
muestra el contenido oculto,
Tengo el contenido oculto para mostrar, pero el contenido original todavía está visible, ¿alguna ayuda?
mi código a continuación:
import React, { useState } from 'react' function Body() { const [show, setShow] = useState(true); const [hide, setHidden] = useState(true); return ( <> <div className='container'> <div className="start-container"> <h2>Click Start To View The Application</h2> <button onClick={ () => setShow(s => ! s) } className='btn'>Start!</button> </div> {/* URL Link Input */} <div> {!show ? <form action="GET"> <input type="text" /> <button className='btn'>Submit</button> </form> : null } </div> </div> </> ) } export default BodyEstás cerca, necesitas tener el contenido original en el ternario para que esté oculto una vez que alternas show . También cambié setShow para establecer show en false en lugar del valor anterior, ya que no importa porque el botón no se puede alternar porque una vez que hace clic en él, no puede volver a alternar el contenido original.
import React, { useState } from 'react' function Body() { const [show, setShow] = useState(true); return ( <div className='container'> {show ? ( <div className="start-container"> <h2>Click Start To View The Application</h2> <button onClick={() => setShow(false)} className='btn'>Start!</button> </div> ) : ( <form action="GET"> <input type="text" /> <button className='btn'>Submit</button> </form> ) </div> ) } export default Bodyno necesita ocultar el estado y puede alternar la visibilidad solo con mostrar el estado. prueba esto:
{ show ? <form action="GET"> <input type="text" /> <button className='btn'>Submit</button> </form> : null }Podría usar un estado appStarted y luego renderizar su componente condicionalmente:
const { useState } = React function Body() { const [appStarted, setAppStarted] = useState(false) return ( <div className="container"> {appStarted ? ( <div> <h2>Hidden Content</h2> </div> ) : ( <div className="start-container"> <h2>Click Start To View The Application</h2> <button onClick={ () => setAppStarted(true) } className='btn'>Start!</button> </div> )} </div> ) } ReactDOM.render(<Body />, document.getElementById("root")) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>