How it works...

The Tabs and Tab components are rendered inside the AppBar component. Usually, AppBar has a Toolbar component as its child, but Tab can work too:

<AppBar position="static">
  <Tabs value={value} onChange={onChange}>
    <Tab label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" />
  </Tabs>
</AppBar>

Your component has a value state that is used to keep track of the selected tab. The onChange() handler is used to update this state; it gets set to the current index of the selected tab. Then, you can use the value state to determine which content to render below the AppBar component:

{value === 0 && (
  <Typography
    component="div"
    className={classes.tabContent}
  >
    Item One
  </Typography>
)}
{value === 1 && (
  <Typography
    component="div"
    className={classes.tabContent}
  >
    Item Two
  </Typography>
)}
{value === 2 && (
  <Typography
    component="div"
    className={classes.tabContent}
  >
    Item Three
  </Typography>
)}

If the first tab is selected, then the value is 0 and the Item One text is rendered. The same logic follows for the other two tabs.