Luchando por obtener mi renderizado modal cuando hago clic en un botón para mostrarlo. Aquí está el flujo de esta funcionalidad.

Comenzamos activando la alternancia cuando se hace clic en el botón de inicio de codificación:

 Start Coding </button> <StartModal isShowing={isShowing} hide={toggle} />

alternar se transmite desde useModal()

 const { isShowing, toggle } = useModal();

userModal cambia el estado de isShowing a verdadero/falso

 import { useState } from 'react'; const useModal = () => { const[isShowing, setIsShowing] = useState(false); function toggle() { console.log('toggle is being triggered') setIsShowing(!isShowing); } return { isShowing, toggle, }; }; export default useModal;

En este punto toggle is being triggered registra en la consola

StartModal entonces debería volverse visible:

 import React from "react"; import "../../assets/scss/modal.scss" import ReactDOM from 'react-dom'; const StartModal = ({ isShowing, hide }) => isShowing ? ReactDOM.createPortal( <> <div className="md-modal md-effect-12"> <div className="md-content"> <h3>Ready to start programming?</h3> <div> <p>The session will be split into 5 phases:</p> <ul> <li>Introductions</li> <li>Pseudo-Code</li> <li>Time to Code</li> <li>Solution</li> <li>Rating</li> </ul> <button className="md-close" onClick={hide} >Close</button> </div> </div> </div> <div className="md-overlay"></div> </>, document.body ) : null; export default StartModal;

Cuando hago clic en el botón de inicio de codificación, mi modal aparece en mi HTML. Cuando reviso la pestaña Elements en mi navegador, veo que aparece el modal pero no puedo verlo en mi pantalla. No creo que sea un problema de css porque tengo una propiedad z-index: 2000 en el div principal. ¿Parece que el div aparece fuera de mis componentes de reacción?