React.js Material-UI：以编程方式隐藏和显示选项卡

Question

I am trying to show and hide the 2nd tab programmatically yet when I click on the 3rd tab I see the content of the 2nd tab.

Providing my code snippet and sandbox below

Can someone please help?

https://codesandbox.io/s/material-demo-8je9d

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);
  const [Tab2Visible] = useState(false);

  useEffect((newValue) => {
    // const { user } = props;

    console.log("useEffect newValue--->", newValue);
  }, []);

  const handleChange = (event, newValue) => {
    console.log("newValue--->", newValue);
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
        >
          <Tab label="Item One" {...a11yProps(0)} />
          {Tab2Visible === false ? (
            ""
          ) : (
            <Tab label="Item Two" {...a11yProps(1)} />
          )}
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

Answer 1

If you do not provide any value property to the Tab component, MaterialUI defaults it to the index of the rendered items. Since only two Tab elements are rendered, the handleChange function gives value as 1 for Tab item 3.

Adding an explicit value property will work the way you want it to

 <Tabs
       value={value}
      onChange={handleChange}
      aria-label="simple tabs example"
    >
      <Tab label="Item One" value={0} {...a11yProps(0)} />
      {Tab2Visible === false ? (
        ""
      ) : (
        <Tab label="Item Two" value={1} {...a11yProps(1)} />
      )}
      <Tab label="Item Three" value={2} {...a11yProps(2)} />
    </Tabs>

Working DEMO