How to do it...

Let's say that you have some data that determines the tabs to render in your app. You can set this data in the state of your component and use it to render the Tab components, as well as the tab content when tab selections are made. Here's the code:

import React, { useState } from 'react';

import { makeStyles } from '@material-ui/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  },
  tabContent: {
    padding: theme.spacing(2)
  }
}));

export default function RenderingTabsBasedOnState() {
  const classes = useStyles();
  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'
    }
  ]);

  const onChange = (e, value) => {
    setTabs(
      tabs
        .map(tab => ({ ...tab, active: false }))
        .map((tab, index) => ({
          ...tab,
          active: index === value
        }))
    );
  };

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

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

When you first load the screen, you'll see the following:

If you click on the ITEM TWO tab, here's what you'll see: