How to check which tab is active using Material UI?

Material-UI provides a variety of components that help us 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>

Method 1: Using String Values

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);
      console.log('Active tab:', newValue);
   };

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

export default MyComponent;

Method 2: Using the Selected Prop

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);
      console.log('Tab changed to:', newValue);
   };

   return (
      <div>
         <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>
         <div>
            <h3>Tab Status:</h3>
            <p>Tab 1 is {activeTab === 'tab1' ? 'active' : 'inactive'}</p>
            <p>Tab 2 is {activeTab === 'tab2' ? 'active' : 'inactive'}</p>
            <p>Tab 3 is {activeTab === 'tab3' ? 'active' : 'inactive'}</p>
         </div>
      </div>
   );
}

export default MyComponent;

Key Points

• The value prop on Tabs controls which tab is currently active
• The onChange handler receives the new tab value when users click a tab
• You can use either numeric indices (0, 1, 2) or string values ('tab1', 'tab2', 'tab3')
• The selected prop on individual Tab components is optional and mainly for styling purposes

Conclusion

Material-UI's Tabs component makes it easy to track active tabs using React's useState hook. The key is maintaining a state variable that holds the current tab value and updating it through the onChange handler.