How to check which tab is active using Material UI?

Material-UI provides various components to help us build user interfaces with a consistent look and feel. One of the components provided by Material-UI 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 the popular React UI library Material-UI.

Use 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 tabs and tab components. We can do this by adding the following line of code at the top of the component file -

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

Step 3 - Create a state to track active tabs. We can do this using the useState hook in React. Here is an example of how to create a state variable named value -

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

Step 4 - We need to use 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 create a state to track the active tab: we create a state variable called activeTab, which is initialized to "tab1".

We define a function handleTabChange, which takes events and newValue as parameters 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", the first tab is active; if activeTab is "tab2", 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 to use the selected property of the tab component. The selected attribute allows us to define whether the tab should be selected.

In this case, we can check which tab is active by checking the state variable activeTab; we pass the selected property to the Tab component and compare the value of the state variable activeTab with the value of the Tab component. If there is a match, the tab is selected; otherwise, it is not.

This is an example of how to use selected props 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 learned how to use Material-UI to check which tab is active.

We've seen how to install Material-UI, import tabs and tab components, create state variables to track active tabs, and how to use these components in our JSX code.

The above is the detailed content of How to check which tab is active using Material UI?. For more information, please follow other related articles on the PHP Chinese website!