Tengo un drawer para la navegación de mi móvil. Se abre bien y se cierra bien cuando toco el icono del cajón. Pero estoy tratando de implementar un toque/clic para cerrar la barra de navegación. Entonces, cuando el usuario hace clic o toca fuera de la barra de navegación, debería cerrarse. Pero estoy recibiendo errores para hacer tapping cuando el cajón está cerrado porque falta la ref en la página. Así que me gustaría usar una verificación para ver si el cajón está abierto ejecutando if (drawerIsOpen) { do...} else { dont...} Lo extraño es que no estoy recibiendo el estado actualizado de mis accesorios. El cajón se cierra y se abre como debería, pero cuando hago console.log(drawerIsOpen) nunca da el estado correcto. El siguiente código debería explicar algo de lo que quiero decir.

 const Drawer = ({ drawerIsOpen, handleDrawer, drawerButtonRef }) => { const drawerRef = useRef(null); function handleClickOutside(event) { if (!drawerIsOpen) { // always returns since state is always telling me the drawer is closed return; } if (drawerRef.current.contains(event.target)) { console.log('inside'); } else { console.log('outside'); console.log(handleDrawer); handleDrawer(); } } useEffect(() => { document.addEventListener('mousedown', handleClickOutside); document.addEventListener('touchstart', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('touchstart', handleClickOutside); }; }, []);

Mi estado está siendo enviado a través de props. Mi estado comienza en este componente:

 const drawerButtonRef = useRef(null); const [drawerIsOpen, setDrawerIsOpen] = useState(false); const handleDrawer = () => { setDrawerIsOpen((prevState) => !prevState); }; return ( <> <Drawer drawerIsOpen={drawerIsOpen} handleDrawer={handleDrawer} drawerButtonRef={drawerButtonRef} /> </> )