Estoy tratando de cambiar el estado de un componente al hacer click fuera de él. Se me ocurrió registrar un evento al hacer click en un elemento del DOM, pero no me funcionó a la hora de cambiar el estado.
Esto es lo que tengo hasta ahora:
function Sidebar ({ state, setState }) {
const sidebarLi = document.querySelectorAll('.sidebar li');
document.addEventListener('click', (e) => {
const click = e.target;
sidebarLi.forEach(function (element) {
if (click === element) {
setState(true);
} else {
setState(false);
}
});
});
return (
<React.Fragment>
{state && (
<div className='sidebar'>
// Acá va más código pero no lo puedo poner porque stackoverflow me dice
// que la publicación tiene mucho código
</div>
)}
</React.Fragment>
)
}