How it works...

Let's start by looking at the state of your component that drives the tabs that are rendered:

const [tabs, setTabs] = useState([
  {
    active: true,
    label: 'Item One',
    content: 'Item One Content'
  },
  {
    active: false,
    label: 'Item Two',
    content: 'Item Two Content'
  },
  {
    active: false,
    label: 'Item Three',
    content: 'Item Three Content'
  }
]);

The tabs state is an array, and each object within it represents a tab to be rendered. The active Boolean property determines which tab is active. The label property is what is rendered as the actual tab button and the content is rendered below the tabs when the tab is clicked on.

Next, let's take a look at the markup used to render the tabs and the content:

<Tabs value={active} onChange={onChange}>
  {tabs.map(tab => <Tab label={tab.label} />)}
</Tabs>
<Typography component="div" className={classes.tabContent}>
  {content}
</Typography>

Instead of manually rendering Tab components, you're iterating over the tabs state to render each tab. For the selected content, you now only have to render one Typography component that references content.

Let's take a look at the two active and content values, as follows:

const active = tabs.findIndex(tab => tab.active);
const content = tabs[active].content;

The active constant is the index of the active tab. This value is passed to the value property of the Tabs component. It's also used by the content value—the content of the active tab. Both of these constants simplify the markup that your component needs to render.