Tengo este elemento useState, pero la función no se llama onClick. He probado muchas soluciones y depuración y parece que el evento Click no se llama, pase lo que pase.
const [modalHotel, setModalHotel] = useState(false)
{modalHotel && <ModalHotel CloseModal = {setModalHotel} />}
<img src="./assets/square.svg" alt="expand" onClick={() => setModalHotel(!modalHotel)}/>
A veces, los elementos no registrarán eventos onClick en React a menos que especifiques un tabIndex . Prueba esto:
const checkClick = () => { console.log("It worked!!"); setModalHotel(!modalHotel); } <img tabIndex={0} src="./assets/square.svg" alt="expand" onClick={checkClick} />esto lo ayudará a depurar si el evento de clic realmente se está disparando.
Desde una perspectiva de accesibilidad, casi siempre es preferible usar a button o elementos para manejar clics como este. Tienen tabIndexes por defecto, y mejor soporte en general.
¡Encontré el problema!
Tenía este z-index: -1; en mi css, lo eliminé y funcionó.
Realmente no ha proporcionado suficiente información para diagnosticar completamente su problema. Pero mientras tanto, aquí hay un fragmento funcional con un elemento en el que se puede hacer clic (un botón) para alternar el estado usando un gancho useState . Puede comparar qué es diferente entre su código que no funciona y este ejemplo de trabajo.
const { useState } = React; const Thing = (props) => { const [modalHotel, setModalHotel] = useState(false); return ( <div> <h1>{modalHotel.toString()}</h1> <button onClick={() => setModalHotel(!modalHotel)}>Toggle</button> </div> ); } ReactDOM.render( <Thing />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>