0

Necesito cerrar la modal del componente padre desde el componente hijo, ambos son componentes funcionales. Cómo podría hacerlo?

Componente Padre

                    const ComponentePadre = () => {
                    const [show, setShow] = useState(); 
                    
                    const openModal = () => {
                        setShow(true);
                    };

                    const closeModal = () => {
                        setShow(false);
                    };

                    return  (
                        <>
                        <Modal show={show} onHide={closeModal}>
                            <Modal.Header closeButton></Modal.Header>
                            <Modal.Body>
                            <>
                                <ComponenteHijo />
                            </>
                            </Modal.Body>
                        </Modal>
                        </>
                    );
                    };

                    export default ComponentePadre;

Componente hijo

            const ComponenteHijo = () => {

            return (
                <>
                <div>
                    <button className="btn btn-danger">cerrar Modal En Componente Padre</button>
                </div>
                </>
            ) ;
            };

            export default ComponenteHijo;

Me ahorro las importaciones, aunque posiblemente deba importar alguna función al componente hijo, es posible?

1 respuesta 1

2

debes pasar tu funcion closeModal hacia tu componente hijo, sigue con estos pasos:

Componente Padre

  • Debes establecer un valor inicial a tu estado del modal

    const [show, setShow] = useState(false);
  • Ahora debes pasar la funcion closeModal como prop a tu componente hijo para actualizar el estado

    <ComponenteHijo closeModal={closeModal}/>
    

Component Hijo

const ComponenteHijo = ({ closeModal }) => {
   return (
      <div>
         <button className="btn btn-danger" onClick={() => closeModal}>cerrar Modal En Componente Padre</button>
      </div>
    );
 };
  • En El Component Hijo recibes la prop y la ejecutas en el evento onClick del button
1
  • Genial! funciona! muchas gracias!!
    – rafa_pe
    el 21 ene. 2021 a las 8:45

Tu Respuesta

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

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