title: React Tabs and selectedIndex
body: <p>I'm using React Tabs (<a href="https://github.com/reactjs/react-tabs" rel="nofollow noreferrer">https://github.com/reactjs/react-tabs</a>) in controlled mode.</p>
  <p>Setting the <code>tabIndex</code> in a parent Component:</p>
  <pre><code>this.setState({
      tabIndex: 1,
  });
  </code></pre>
  <p>And passing the <code>tabIndex</code> through in the properties:</p>
  <pre><code>&lt;TabContents tabIndex={this.state.tabIndex} /&gt;
  </code></pre>
  <p>Putting the component into &quot;controlled mode&quot;:</p>
  <pre><code>export default class TabContents extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              tabIndex: 0
          }
  
      }
  
      ...
  
      render() {
  
          &lt;Tabs selectedIndex={this.props.tabIndex} onSelect={tabIndex =&gt; this.setState({ tabIndex })}&gt;
  
      ...
  
      }
  }
  </code></pre>
  <p>This works and the second tab (with a <code>tabIndex</code> of 1) is selected.</p>
  <p>However when I click on any other tab, nothing happens. It's stuck on the <code>tabIndex</code> of 1. <strong>How do I go about allowing to switch tabs when in &quot;controlled mode&quot;?</strong></p>
  <h1>Full JSX:</h1>
  <pre><code>&lt;Tabs selectedIndex={this.props.tabIndex} onSelect={tabIndex =&gt; this.setState({ tabIndex })}&gt;
      &lt;TabList&gt;
          &lt;Tab&gt;Accounts &lt;span className=&quot;badge badge-pill badge-primary&quot;&gt;{this.props.selectedSource ? this.props.sources[sourceIndex].accounts.length : 0}&lt;/span&gt;&lt;/Tab&gt;
          &lt;Tab&gt;Forms&lt;/Tab&gt;
      &lt;/TabList&gt;
  
      &lt;TabPanel&gt;
          {this.props.activeDetails ? this.props.activeDetails.make : null }
  
          {accounts &amp;&amp; (
              &lt;ul className=&quot;accounts-list list-group&quot;&gt;{accounts}&lt;/ul&gt;
          )}
  
          {disabled_accounts &amp;&amp; (
              &lt;ul className=&quot;accounts-list disabled list-group&quot;&gt;{disabled_accounts}&lt;/ul&gt;
          )}
  
      &lt;/TabPanel&gt;
      &lt;TabPanel&gt;
          &lt;h2&gt;Forms&lt;/h2&gt;
          {this.props.activeDetails ? this.props.activeDetails.make : null }
      &lt;/TabPanel&gt;
  &lt;/Tabs&gt;
  </code></pre>