0

estoy empezando con react y se me presenta un problema y es que tengo dos componentes (padre, hijo) necesito que cuando le de click a un button este mediante useState pase una prop la cual me permita activar una clase y mostrar en pantalla una ventana del SEGUNDO COMPONENTE, pero este segundo componente (hijo) también tiene un button para cerrar la ventana, por lo que si lo hago de la manera como lo enseño en el código tengo que hacer doble click en el button del componente padre para nuevamente mostrar la ventana.

¿Cómo hago para modificar el state de mi componente padre desde el componente hijo cuando le de click al botón?

Si me pueden ayudar se los agradecería mucho.

const ComponentOne = () => {
    const [showLogIn, setShowLogIn ] = useState(false);

    return(
        <>
            <button onClick={setShowLogIn(!showLogIn)}>Iniciar Sesión</button>
            <ComponentTwo showWindow={showLogIn} />
        </>
    )
}

const ComponentTwo = (props) => {
    const { showWindow } = props;
    const [closeLogIn, setCloseLogIn] = useState(showWindow);
    const show = closeLogIn ? "active" : "";

    return(
        <>
            <button className="close-window" onClick={setCloseLogIn(!closeLogIn)}></button>
            <div className={`formulario-registro ${show}`} >
                {/* ... */}
            </div>
        </>
    )
}
2
  • ¿Para el segundo componente abres una ventana nueva? ¿O es un modal?
    – Jacobo
    Commented el 11 ago. 2021 a las 20:52
  • Si se podría decir que es un Modal, lo que hago es que al dar click activo un clase que con CSS le pone un visibility:visible, pero necesito es actualizar el state del componente padre para evitar el doble click. Es decir cuando le de a cerrar en la ventana (componente hijo) en el padre me actualice el estado a ->false<- y de esta manera cuando vuelva a dar click en el boton del componente padre con un click pase a ->true<-
    – Andrés MZ
    Commented el 11 ago. 2021 a las 20:58

2 respuestas 2

1

Mi sugerencia sería que manejaras todo en el componente padre. Y que el componente hijo sea renderizado condicionalmente usando la variable showLogin que ya tienes.

Después podrías crear un método que puedas pasar al componente hijo mediante props, para que llames al método del padre desde el componente hijo, y actualices el valor de la variable showLogin.

Tú código podría quedar de la siguiente forma:

const ComponentOne = () => {
    const [showLogIn, setShowLogIn ] = useState(false);

    constructor(props) {
        super(props);
        this.toggleLogin = this.toggleLogin.bind(this);
    }

    toggleLogin() {
        setShowLogIn(!showLogin);
    }

    return(
        <div>
            <button onClick={() => setShowLogIn(!showLogIn)}>Iniciar Sesión</button>
            { 
                showLogin && <ComponentTwo toggleLogin={this.toggleLogin} />
            }
        <div/>
    )
}

const ComponentTwo = (props) => {
    const { showWindow } = props;
    const [closeLogIn, setCloseLogIn] = useState(showWindow);
    const show = closeLogIn ? "active" : "";

    return(
        <div>
            <button className="close-window" onClick={() => {this.props.toggleLogin()}}></button>
            <div>
                {/* ... */}
            </div>
        <div/>
    )
}
0

Existe una forma nativa para crear estados globales. Se llama useContext. Existen herramientas externas a react como redux que se hizo muy popular justamente por solucionar el problema que mencionas.

Referencia a useContext https://es.reactjs.org/docs/hooks-reference.html#usecontext

El siguiente es un vídeo en inglés de como usar el nuevo redux. https://youtu.be/9zySeP5vH9c

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.