How to open a selected nested list on Material-UI? - reactjs

Question

I have a code in React where I have two list menus that have nested menus.
class Nav extends React.Component {
state = { open: false };
handleClick = () => {
this.setState({ open: !this.state.open });
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<List
component="nav"
>
<ListItem button onClick={this.handleClick}>
<ListItemText primary="Files" />
{this.state.open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button className={classes.nested}>
<ListItemText primary="Providers" />
</ListItem>
<ListItem button className={classes.nested}>
<ListItemText primary="Insurance Companies" />
</ListItem>
</List>
</Collapse>
<ListItem button onClick={this.handleClick}>
<ListItemText primary="Utilities" />
{this.state.open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button className={classes.nested}>
<ListItemText primary="Excel Templates" />
</ListItem>
<ListItem button className={classes.nested}>
<ListItemText primary="Upload File" />
</ListItem>
</List>
</Collapse>
</List>
</div>
);
}
}
When I click the first menu, the second menu also opens. How do I only open one menu and the other one remains closed?

Answer 1

I think you will need to have two seperate values in state in order to only open one at a time
state = { openMenu1: false, openMenu2: false }
And the click events should trigger only one of those to go to true/false.
Make sure to change the variable in the Collapse component to use the corresponding state as well