React Material-UI Cookbook

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}> ...