-1

I'm new to Framework and i have an issue with me sidebar which is showing Table tab as default but it should not show any tab's page as clicked. By default it should show nothing. When we click on a particular tab then it should show color on the tab of the sidebar. If i give -1 then the color is getting disappeared on the menu tab but the Tab's page remain as it is. Is it possible to give pathname. how to fix by giving id ? . If Yes Can anyone help me in fixing this issue?

Here is the code: 

<Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper
        }}
      >
        <div className={classes.toolbar} />
        <List>
          {["table", "home"].map((item, index) => {
            const Icon = itemsConfig[item].icon;
            return (
              <ListItem
                component={Link}
                to={itemsConfig[item].link}
                selected={selectedIndex === index}
                onClick={event => handleListItemClick(event, index)}
                button
                key={item}
              >
                <ListItemIcon>
                  <Icon />
                </ListItemIcon>
                <ListItemText primary={itemsConfig[item].text} />
              </ListItem>
            );
          })}
        </List>
      </Drawer>

Here is whole code: "https://codesandbox.io/s/fervent-browser-ecz7z"

Can anyone help me in this ?

Sandhya
  • 401
  • 2
  • 10
  • 24
  • My first answer got deleted, because it wasn't explained well, and contained just the link with the result. Please see it and re-accept and upvote it again. – Enchew Apr 20 '20 at 16:14

1 Answers1

0

Define your state, that holds the selected index in your <Layout /> component. Define function that manipulate that state and pass it to , <Home /> andcomponents along with the newly defined state. Finally call the function after the initial rendering of the component. For the (class component) use:

  componentDidMount() {
    this.props.setTabIndex(this.props.index);
  }

For the <Table /> use: 

useEffect(() => {
  props.setTabIndex(props.index);
}, []);

The full result is posted here: https://codesandbox.io/s/cold-mountain-hlhk8?

Enchew
  • 981
  • 5
  • 11