Tengo un control deslizante que contiene tarjetas de "Eventos", y cuando el usuario hace clic en una tarjeta, aparece un modal. Y dentro del modal, hay un botón que redirige al usuario a un formulario de registro.

Estoy usando reaccionar-modal .

El problema es que cuando el usuario hace clic en el botón, la barra de desplazamiento desaparece. Y mi conclusión es que el estado modal aún se establece como abierto después de cambiar la página actual.

Aquí hay un código extraído del componente News y dentro de él encontrarás el modal:

 import Modal from "react-modal"; function News() { const [modalIsOpen, setIsOpen] = React.useState(false); const closeModal = () => { setIsOpen(false); }; return ( <Button onClick={() => setIsOpen(true}> Open Modal </Button> <Modal className="modal-class" isOpen={modalIsOpen} onRequestClose={closeModal} > <EventDetail onCloseModal={ () => setIsOpen(false), modalIsOpen } /> </Modal> ) }

este es el detalle del evento:

 function EventDetail (onCloseModal) { const navigateToRegistrationForm = () => { console.log(onCloseModal); history.push(`${baseUrl}/registrationForm/${form.id}`) ; } return ( <Button onClick={navigateToRegistrationForm}> Register </Button> ) }

El console.log devuelve "verdadero", lo que significa que el modal todavía está configurado como abierto. ¿Cómo puedo cambiar su estado cuando se llama a la función "navigateToRegistrationForm"?