React Material-UI Cookbook

How to do it...

Let's say that your app uses tabs in several places throughout your app, and you want to simplify the markup used to create the tabs and the tab content. In the places where you use tabs, you just want to be able to render the content and not have to worry about handing state for the active tab. Here's some code that creates two new components that simplify the JavaScript XML (JSX) required for rendering tab content:

import React, { Fragment, Children, useState } from 'react';import { withStyles } from '@material-ui/core/styles';import Tabs from '@material-ui/core/Tabs';import Tab from '@material-ui/core/Tab';import Typography from '@material-ui/core/Typography';const styles = theme => ({  root: {    flexGrow: 1, backgroundColor: ...