Tengo un componente principal en el que estoy luchando para abrir/cerrar correctamente el componente secundario (modal). Los dos cuadros de código a continuación son ejemplos simplificados de mis componentes.

EDITAR: aquí hay un entorno limitado de código con el siguiente código: no hay un modal real, sin embargo, registré todos los valores con estado que supongo que tendrán un efecto en este problema y puede ver cómo cambian/no No cambiará como espero que lo hagan.

Zona de pruebas de código

• Cuando el componente principal está abierto, puedo hacer clic en MenuItem y puedo ver el cambio de estado, sin embargo, el modal no se abre a menos que cierre el componente principal temporalmente y lo vuelva a abrir (entonces el componente principal se abre con el modal ya abierto)
• Cuando el modal está abierto, trato de cerrar haciendo clic en el botón de cerrar (que tiene la función de cambio de estado del padre dentro del método onClick. this.state.showModal sigue siendo verdadero y no cambia a falso.
• Si agrego un valor con estado de closeModal al componente secundario y lo cambio durante los botones de cierre al hacer clic, this.state.showModal seguirá siendo verdadero.

Gracias a quien se comunique, y si tiene alguna pregunta aclaratoria, ¡no dude en preguntar!

 class Parent extends Component { constructor(props) { super(props); this.showModal = this.showModal.bind(this); this.closeModal = this.closeModal.bind(this) this.state = { showModal: false }; this.showModal = this.showModal.bind(this) this.closeModal = this.closeModal.bind(this) } showModal() { this.setState({ showModal: true }); } closeModal() { this.setState({ showModal: false }); } render() { return ( <MenuItem onClick={this.showModal}> <ChildComponent prop1={prop1} isOpen={this.state.showModal} closeModal={this.closeModal} /> </MenuItem> )}

 const ChildComponent = ({ prop1, isOpen, closeModal }) => { const [modalOpen, setModalOpen] = useState(isOpen) useEffect(() => { setModalOpen(isOpen) },[isOpen]) console.log('isopen on child', isOpen) console.log('modalOpen', modalOpen) return ( <div> {modalOpen && ( <button onClick={() => { setModalOpen(false) closeModal() }} > {'click to close modal'} </button> )} </div> )} )}