title: React Tabs onClick get index of selected Tab
body: <p>I am new to React and I am trying to get the selected Tab and from a onClick event. </p>
  
  <p>Below is my code along with output.</p>
  
  <p>How would I implement the <code>handleSelect</code> function?</p>
  
  <p>Here is my current code:</p>
  
  <pre><code>class Header extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value : 0};
    }
  
    getState(){
      return this.state.value;
    }
  
    setState(state){
      this.state = state;
    }
  
    handleSelect(index){
      console.log('Selected tab: ' + index);
    }
  
    render() {
      let selectedIndex = this.getState();
  
      return (
        &lt;header className="header"&gt;
          &lt;AppBar title="App Bar" /&gt;
  
          &lt;Tabs&gt;
            &lt;Tab label="Core Courses" onClick={this.handleSelect(0)} /&gt;
            &lt;Tab label="Capstone Requirement" onClick={this.handleSelect(1)}/&gt;
            &lt;Tab label="Computer Science Electives" onClick={this.handleSelect(2)}/&gt;
            &lt;Tab label="Support Courses" onClick={this.handleSelect(3)} /&gt;
          &lt;/Tabs&gt;
  
        &lt;/header&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here is the console log currently when rendered:</p>
  
  <pre><code>Selected tab: 0
  Selected tab: 1
  Selected tab: 2
  Selected tab: 3
  </code></pre>