Estoy tratando de hacer un modal de inicio de sesión que cambie al modal de registro cuando se hace clic en el botón de registro dentro de Login.js. Actualmente, tengo un encabezado con un botón de inicio de sesión. Cuando se hace clic en el botón de inicio de sesión, se muestra el estado actual (el valor predeterminado es ). Me gustaría que el botón de registro dentro de Login.js pueda actualizar el estado para que ese modal sea .
Encabezado.js:
import React, { useState } from 'react'; import Login from "../modals/Login"; import Signup from "../modals/Signup"; export default function Header() { const [lmodal, setModal] = useState(<Login />); return ( ... {lmodal} ... ) }Iniciar sesión.js
import React, { useState } from 'react'; import Signup from "../modals/Signup"; export default function Login() { return ( ... **// Clicking the button should change the state from Header.js to <Signup />** <button onClick={() => { setModal(<Signup />) }} className="btn btn-primary">Signup</button> ... ) }¡Gracias por la ayuda por adelantado!
no puede establecer Modal desde dentro del componente Inicio de sesión porque set Modal está en el componente Encabezado.
Los estados y componentes son diferentes en concepto. Lo que podría hacer para alcanzar el comportamiento deseado es usar el estado para modificar el componente, por ejemplo:
import React, { useState } from 'react'; import Login from "../modals/Login"; import Signup from "../modals/Signup"; export default function Header() { const [modal, setModal] = useState(false); return ( ... {modal && <Login />} <Signup modal={modal} setModal={setModal}/> ... )} import React, { useState } from 'react'; import Signup from "../modals/Signup"; export default function Login({modal, setModal}) { return ( ... <button onClick={() => setModal(true)} className="btn btn-primary">Signup</button> ... ) }