title: Reactjs - reset tab index on action change in material-ui
body: <p>I am using the <code>Tabs</code> of <code>material-ui</code>. The swipe-able tab is opened on <code>onTouchTap</code>, its working fine but the <code>tab</code> index is not getting reset to <code>0</code> on new action, its showing the last tab index, not the <code>tab</code> with index <code>0</code>. I tried to create a function to change the state to 0, but its saying that the state cannot be changed inside render. Kindly help, I am new to Reactjs.</p>
  
  <pre><code>class ModelDetail extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        slideIndex: 0,
      };
    }
  
    handleChange (value) {
      this.setState({
        slideIndex: value,
      });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;Tabs onChange={this.handleChange.bind(this)} value={this.state.slideIndex}&gt;
            &lt;Tab label="Input Parameters" value={0} style={styles.heading} /&gt;
            &lt;Tab label="Benchmark Output" value={1} style={styles.heading} /&gt;
            &lt;Tab label="Output Figures" value={2} style={styles.heading} /&gt;
          &lt;/Tabs&gt;
          &lt;SwipeableViews index={this.state.slideIndex}  onChangeIndex={this.handleChange.bind(this)}&gt;
            ...
            ...
          &lt;/SwipeableViews&gt;
        &lt;/div&gt;
      )}
  </code></pre>