I am a beginner with this framework and my goal is to change the color when clicking on a Menu Item in the Sidebar. For example, clicking on the table component should change the table name and icon to white color. Could someone please help me figure out how to achieve this color change on menu item click?
Below is the code snippet:
class Sidebar extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedIndex: 0
};
}
handleListItemClick = (event, index) => {
this.setState({
selectedIndex: index
});
};
render() {
const { className, classes, onSidebarOpen, ...rest } = this.props;
return (
<div className={classes.root}>
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper
}}
>
<div className={classes.toolbar} />
<List>
{["table", "organisation"].map((item, index) => {
const Icon = itemsConfig[item].icon;
return (
<ListItem
component={Link}
to={itemsConfig[item].link}
selected={index === this.state.selectedIndex}
onClick={event => this.handleListItemClick(event, index)}
button
key={item}
>
<ListItemIcon>
<Icon />
</ListItemIcon>
<ListItemText primary={itemsConfig[item].text} />
</ListItem>
);
})}
</List>
</Drawer>
</div>
);
}
}
export default withStyles(styles)(Sidebar);