React Material-UI Cookbook

How it works...

Let's start by looking at the markup used to render the tabs in this following example:

<TabContainer>  <TabContent label="Item One">Item One Content</TabContent>  <TabContent label="Item Two">Item Two Content</TabContent>  <TabContent label="Item Three">Item Three Content</TabContent></TabContainer>

This markup is much more concise than using the Tab and Tabs components directly. This approach also handles rendering the content of the selected tab. Everything is self-contained with this approach.

Next, let's take a look at the TabContainer component:

function TabContainer({ children }) {  const [value, setValue] = useState(0);  const onChange = (e, value) => {    setValue(value);  };  return (    <Fragment> <Tabs value={value} onChange={onChange}> ...