Is ther anyway to set the Material UI Tabs unselected as default?

Viewed 980

I'm using the material UI Tabs in my project cause I thought it fits my web logic. However, I need to set it as unselected as default. What I did is set the default state value as 'undefinded'. It acturly works as the 1st item of the Tabs won't be selected as default, but I also getting the following error from the console:

Material-UI: The value provided to the Tabs component is invalid. None of the Tabs' children match with undefined. You can provide one of the following values: 0, 1, 2.

Anyone knows how to accomplish my target and avoid the error message?

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState();  //I set the default value to undefinded to make the Tabs unselected as default but also getting the error message.

  const handleChange = (event, 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)} />
          <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>
  );
}
1 Answers

From the docs > Props > value:

The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false.

To accomplish this, set the initial value to false:

const [value, setValue] = React.useState(false);
Related