i have a collabsable sidebar that i'm building with react and some menus have dropdowns, what would be the best approch to collapse the dropdown menus when the sidebar itself is called to collapse i have to boolean's for the sidebar and the menus within the sidebar
this is the basic function that collapses the sidebar
const [open, setOpen] = useState(false) //for the menus
const [collapse, setCollapse] = useState(false) //for the sidebar
function handleCollapse() {
setCollapse(!collapse);
}
i'm calling the function from a button onClick={handleCollapse}
Just add an effect that gets triggered when collapse changes
useEffect(() => {
if(collapse) setOpen(false)
}, [collapse])
btw, you can use functional state update to access previous collapse:
function handleCollapse() {
setCollapse(prevCollapse => !prevCollapse);
}
I see 2 ways
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 with a similar functionality as useStateI would avoid useEffect - it would require state update twice.