How to check which tab is active using Material UI ?. The Complete React Native Developer Course 2023 [Videos].

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 dont 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 youre 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:

• Its 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 its time for the actual things. Lets 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: