How to check which tab is active using Material UI?

Material-UI provides a variety of components that help us to build user interfaces with a consistent look and feel. One of the components that Material-UI provides is the Tabs component, which allows us to create tabbed interfaces in our applications. In this tutorial, we will learn how to check which tab is active using Material-UI, a popular React UI library.

Use the useState hook to check which tab is active

Users can follow the steps below to check which tab is active using Material UI.

Step 1 − First, users need to install Material-UI. We can do this by running the following command −

npm install @mui/material @emotion/react @emotion/styled

Step 2 − Import the Tabs and Tab components. We can do this by adding the following lines of code at the top of our component file −

import { Tabs, Tab } from '@mui/material'; 

Step 3 − Create a state to keep track of the active tab. We can do this using the useState hook from React. Here is an example of how to create a state variable called value −

const [value, setValue] = React.useState(0);

Step 4 − We need to use the Tabs and Tab components. Here is an example of how to use these components −

<Tabs value={value} onChange={(event, newValue) => setValue(newValue)}>
   <Tab label="Tab 1" />
   <Tab label="Tab 2" />
   <Tab label="Tab 3" />
</Tabs>

Example 1

In this example we have created a state to keep track of the active tab: We create a state variable called activeTab, which is initialized to 'tab1'.

We define a function handleTabChange which takes an event and the newValue as the arguments and updates the activeTab state.

We can check the active tab by checking the value of the activeTab state variable. For example, if activeTab is 'tab1', then the first tab is active; if activeTab is 'tab2', then the second tab is active, and so on.

import React from 'react';
import { Tabs, Tab } from '@mui/material';

function MyComponent() {
   // Step 1: Create a state to keep track of the active tab
   const [activeTab, setActiveTab] = React.useState('tab1');

   // Step 2: Define a function to handle tab changes
   const handleTabChange = (event, newValue) => {
      setActiveTab(newValue);
   };

   // Step 3: Use the Tabs and Tab components
   return (
      <Tabs value={activeTab} onChange={handleTabChange}>
         <Tab value="tab1" label="Tab 1" />
         <Tab value="tab2" label="Tab 2" />
         <Tab value="tab3" label="Tab 3" />
      </Tabs>
   );
}

export default MyComponent;

Output

Example 2

Another way to check which tab is active using Material-UI is using the Tab component's selected prop. The selected prop allows us to define whether or not a tab should be selected.

In this case, we can check which tab is active by checking the state variable activeTab; we are passing the selected prop to the Tab component and comparing the value of the state variable activeTab with the value of the Tab component. If it matches, the tab will be selected; otherwise, it won't be.

Here's an example of how to use the selected prop to check which tab is active −

import React from 'react';
import { Tabs, Tab } from '@mui/material';

function MyComponent() {
   const [activeTab, setActiveTab] = React.useState('tab1');

   const handleTabChange = (event, newValue) => {
      setActiveTab(newValue);
   };
   return (
      <Tabs value={activeTab} onChange={handleTabChange}>
         <Tab value="tab1" label="Tab 1" selected={activeTab === 'tab1'} />
         <Tab value="tab2" label="Tab 2" selected={activeTab === 'tab2'} />
         <Tab value="tab3" label="Tab 3" selected={activeTab === 'tab3'} />
      </Tabs>
   );
}
export default MyComponent;

Output

In this tutorial, we have learned how to check which tab is active using Material-UI.

We have seen how to install Material-UI, import the Tabs and Tab components, create a state variable to keep track of the active tab, and use these components in our JSX code.