Así que estoy mostrando el componente page2 después de hacer clic en el botón ya que setShowForm establece mi estado en verdadero. Entonces, el problema que tengo ahora es cómo navego de regreso a mi componente Página 1, ya que tengo que mostrar la Page3 en la Page1 1, por lo que la expresión ternaria puede parecer un poco complicada. Intenté usar React-router-dom y useHistory , ninguno de los dos funciona porque no estoy cambiando de página, solo dentro de un div .
<div className={styles.ticketBox}> { !showForm ? ( //some UI code <div className={styles.whitelistBox}> <Button className={styles.whiteListToggleButton} shape="round" onClick={() => setShowForm(() => true)}>Whitelist</Button> </div> </div> ) : ( <Page2 /> )}Bastante cerca, pero para setShowForm no desea pasar una función, solo desea establecerla en true , por ejemplo:
// defining useState variables const [showForm, setShowForm] = useState(false); // setting to true setShowForm(true) // setting to true on click onClick={() => setShowForm(true)}