title: React-tabs: Uncaught TypeError: Cannot read property 'data' of null, when switching back to main tab?
body: <p>I have a <code>Main.js</code> which is a React class that consolidates other React classes. This works well, but I now want to have three tabs; The first containing the aforementioned <code>Main.js</code>, but the others containing different things.</p>
  
  <p>Using <code>react-tabs</code> I've successfully managed to get it done. There are three tabs as created here:</p>
  
  <pre><code>&lt;Tabs&gt;
      &lt;TabList&gt;
          &lt;Tab&gt;Main&lt;/Tab&gt;
          &lt;Tab&gt;Second&lt;/Tab&gt;
          &lt;Tab&gt;Third&lt;/Tab&gt;
      &lt;/TabList&gt;
       &lt;TabPanel&gt;
          Main goes here.
       &lt;/TabPanel&gt;
       &lt;TabPanel&gt;
          Second goes here.
       &lt;/TabPanel&gt;
       &lt;TabPanel&gt;
          Third goes here.
       &lt;/TabPanel&gt;
  &lt;/Tabs&gt;
  </code></pre>
  
  <p>The <code>Main</code> tab renders and displays just fine. However, if I click to, say, the <code>Second</code> tab, and then back to <code>Main</code>, I will get the following error: <code>TypeError: Cannot read property 'data' of null</code>.</p>
  
  <p>I see where I get the error; namely the first time data from <code>this.state</code> is being used.</p>
  
  <p>What is going wrong? Is it because it is trying to re-render the entire <code>Main</code> component instead of saving the state? </p>
  
  <p>Edit: Here are some pointers to how state is managed in this Main component.</p>
  
  <pre><code>getInitialState: function() {
          return { data : {
              info : {},
              hist : {},
              grouped : {},
              cars : {},
              user : "",
              map :  {},
          }}},
  </code></pre>
  
  <p>We instantiate the values above as empty.</p>
  
  <p>When component mounts, it's populated as such:</p>
  
  <pre><code>componentDidMount : function() {
      this.loadData();
      setInterval(this.loadData, 60000);
  }
  </code></pre>
  
  <p>Where it'll load every 60 seconds.</p>
  
  <p>The loadData function is something along these lines:</p>
  
  <pre><code>loadData : function() {
          console.info("Loading data.. ");
                  $.ajax({
          url: this.props.prefix_url + "/api",
          dataType: 'json',
          cache: false,
          success: function(data) {
              console.info("Received backend data ");
              this.setState({data: data }); // Attach data to the empty values
  // .. Goes on
  </code></pre>