Tengo una barra lateral colaborable que estoy creando con React y algunos menús tienen menús desplegables. ¿Cuál sería el mejor enfoque para colapsar los menús desplegables cuando se llama a la barra lateral para colapsar? Tengo que usar valores booleanos para la barra lateral y los menús dentro de la barra lateral.
esta es la función básica que colapsa la barra lateral
const [open, setOpen] = useState(false) //for the menus const [collapse, setCollapse] = useState(false) //for the sidebar function handleCollapse() { setCollapse(!collapse); } estoy llamando a la función desde un botón onClick={handleCollapse}
Simplemente agregue un efecto que se activa cuando cambia el colapso
useEffect(() => { if(collapse) setOpen(false) }, [collapse]) por cierto, puede usar la actualización del estado funcional para acceder al collapse anterior:
function handleCollapse() { setCollapse(prevCollapse => !prevCollapse); }Veo 2 formas
const [state, setState] = useState({ open: false, collapsed: false }) function handleCollapse() { if (!state.collapsed) { setState({ open: false, collapsed: true }); } else { setState({ open: true, collapsed: false }); } }useReducer con una funcionalidad similar a useState useEffect : requeriría una actualización de estado dos veces.