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: