title: React-bootstrap tabs: Ajax call in one tab is triggered every time any given tab is selected
body: <p>I'm attempting to use <code>react-bootstrap</code>(docs <a href="https://react-bootstrap.github.io/components.html" rel="nofollow noreferrer">here</a>), where I've created 3 tabs. The first tab, which is loaded initially, makes an Ajax call successfully the first time it's loaded.</p>
  
  <p>However, going between tabs will make this Ajax call EVERY time, even though the tab isn't open.</p>
  
  <p>I have tried <code>mountOnEnter</code> and <code>unmountOnExit</code> options from the API. However, this results in not being able to load this tab at all the second time(it does the first), claiming that data in the different components isn't defined(which means the Ajax call isn't made). </p>
  
  <p>Specifically, it will throw the error <code>Uncaught TypeError: Cannot read property 'data' of null</code> which I don't get: The component should be making the Ajax call..?</p>
  
  <p>How do I handle this - is it because it is only loaded with <code>componentDidMount</code>? Shouldn't it run <code>this.ajaxCall();</code> when the given tab is opened again? </p>
  
  <p>Example of code:</p>
  
  <pre><code>let TabExample = React.createClass({
    getInitialState() {
      return {
        key: 1
      };
    },
  
    handleSelect(key) {
      this.setState({key});
    },
  
    ajaxCall : function() { // Ajax call is made here.. 
  
    componentDidMount : function () {
    this.ajaxCall();
    }
  
    render() {
      return (
        &lt;Tabs activeKey={this.state.key} onSelect={this.handleSelect} id="controlled-tab-example"&gt;
          &lt;Tab eventKey={1} title="Tab 1"&gt;Tab 1 content with ajax call&lt;/Tab&gt; // Ajax here
          &lt;Tab eventKey={2} title="Tab 2"&gt;Tab 2 content&lt;/Tab&gt; // No ajax
          &lt;Tab eventKey={3} title="Tab 3" disabled&gt;Tab 3 content&lt;/Tab&gt; // No ajax
        &lt;/Tabs&gt;
      );
    }
  });
  </code></pre>