How to change the menu item's color of sidebar when we click on it with Material-UI in React?

Question

I'm new to the framework, my objective is to show color when I click on one of the Menu Item in Sidebar. If we click on the table component then the table name and icon should change into white color. Can anyone assist me in how to change color while clicking the menu item?

Here is the Code:

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);

Answer 1

Achieved: when click the tabs:

• change the background to grey
• change the icon to white

---

Set conditional styles based on the state of the selected index would be fine.

<ListItem
  ...
  style={
    selectedIndex === index ? { backgroundColor: "grey" } : {}
  }
>
  <ListItemIcon>
    <Icon
      style={selectedIndex === index ? { color: "white" } : {}}
    />
  </ListItemIcon>
  <ListItemText primary={itemsConfig[item].text} />
</ListItem>