How to check which tab is active using Material UI ?

Material-UI is one of the most popular React UI libraries. Material-UI components work in isolation. They are self-supporting, and will only inject the styles they need to display. They don’t rely on any global style-sheets such as normalize.css. Some examples of Material UI components are Dialog, Tabs, Text Field, Menu, Chip, Card, Stepper, Paper. To use Material-UI in React we need to install it manually in our project.

Prerequisites:

• Basic knowledge of React
• Any Code Editor (sublime text editor, VS Code, etc.)

Route Map to Solution

• Create a Sample Project
• Install Material — UI into Project
• Implement Tabs Example
• Applying Final Solution

Approach:

A) Create a Sample project:

• Create a sample React Project by running the following command in your terminal

  npx create-react-app react-material-ui
  

• The above command will create a React app boilerplate within the path the command had run in and ensures that you always use the latest version of a generator or build tool without having to upgrade each time you’re about to use it.
• Enter into the project folder by typing the following command

  cd react-material-ui/
  

• Run the Project by using the command

  npm start
  

• You should be able to see the following in your browser

B) Install Material — UI into Project:

• Install Material-UI by using the below command in your terminal. You can use the terminal of VS Code also.

  npm install @material-ui/core
  

• Now look for App.js in the src folder of your project. Remove all the unnecessary code and add some code if we are on the right path.
  Javascript

  import './App.css';
  import TabsExample from './TabsExample';
  
  function App() {
    return (
      <div className="App">
       <h4>
          Example to Check which Tab is
          active Using Material-UI
        </h4>
      </div>
    );
  }
  
  export default App;

• You will observe the browser getting updated as soon as you save your changes. Now everything is set to write our example.

C) Implement Tabs Example:

• It’s time for your code editor. Create a file named TabsExample.js in your src folder and paste the following code into it.
  Javascript

  import React from 'react';
  import Tabs from '@material-ui/core/Tabs';
  import Tab from '@material-ui/core/Tab';
  
  export default class TabsExample extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        value: 'None',
      };
    }
  
    render() {
      return (
        <div>
        <Tabs
          value={this.state.value}
          indicatorColor="primary"
          textColor="primary"
          centered="true">
  
          <Tab label="Tab A" value="Tab A" />
          <Tab label="Tab B" value="Tab B" />
          </Tabs>
        </div>
      );
    }
  }

• Import your newly created above component into your App.js file. Your App.js file should look like this
  Javascript

  import './App.css';
  import TabsExample from './TabsExample';
  
  function App() {
    return (
      <div className="App">
       <h4>
         Example to Check which Tab is
         active Using Material-UI
       </h4>
       <TabsExample/>
      </div>
    );
  }
  
  export default App;

• The screen will look like this:

Now it’s time for the actual things. Let’s see the approach for the solution

D) Applying Final Solution:

• The idea is to use the onChange Callback which is fired automatically when a Tab value changes

  Syntax:

  function(event: object, value: any) => void
  

  Where,

  event: The event source of the callback
  value: The index of the child (number)

• Now update the App.js file with the below code:
  Javascript

  import React from 'react';
  import Tabs from '@material-ui/core/Tabs';
  import Tab from '@material-ui/core/Tab';
  
  const styles = {
    headline: {
      fontSize: 24,
      paddingTop: 16,
      marginBottom: 12,
      fontWeight: 400,
      color: 'green',
    },
  };
  
  export default class TabsExample extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        value: 'None',
      };
    }
    handleChange = (_, value) => {
      this.setState({
        value,
      });
    };
  
    render() {
      return (
        <div>
        <Tabs
          value={this.state.value}
          onChange={this.handleChange}
          indicatorColor="primary"
          textColor="primary"
          centered="true">
  
          <Tab label="Tab A" value="Tab A" />
          <Tab label="Tab B" value="Tab B" />
          </Tabs>
          <br></br>
          <p style={styles.headline}>
            Currently Active Tab: {this.state.value}
          </p>
        </div>
      );
    }
  }

Output: