title: ReactJS this.state null
body: <p>Let me preface this by saying I am a novice to ReactJS. I am trying to learn by making a simple site that populates data using React. I have a JSON file that contains link data that will be looped through with map. </p>
  
  <p>I have tried setting it as the components state then passing it to the navbar links via a prop but I am getting "Uncaught TypeError: Cannot read property 'data' of null"</p>
  
  <p>I tried to look around for solutions but could not find anything.</p>
  
  <p>Note: When I try to hard code an object and map through it that way it returns map is undefined. However I am not sure that is directly related to the setState error.</p>
  
  <pre><code>/** @jsx React.DOM */
  
  var conf = {
      companyName: "Slant Hosting"
    };
  
  var NavbarLinks = React.createClass({
    render: function(){
      var navLinks = this.props.data.map(function(link){
        return(
          &lt;li&gt;&lt;a href={link.target}&gt;{link.text}&lt;/a&gt;&lt;/li&gt;
        );
      });
      return(
        &lt;ul className="nav navbar-nav"&gt;
          {navLinks}
        &lt;/ul&gt;
      )
    }
  });
  
  var NavbarBrand = React.createClass({
    render: function(){
      return(
        &lt;a className="navbar-brand" href="#"&gt;{conf.companyName}&lt;/a&gt;
      );
    }
  });
  
  var Navbar = React.createClass({
    getInitalState: function(){
      return{
        data : []
      };
    },
    loadNavbarJSON: function() {
      $.ajax({
        url: "app/js/configs/navbar.json",
        dataType: 'json',
        success: function(data) {
          this.setState({
            data: data
          });
          console.log(data);
          console.log(this.state.data);
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    componentDidMount: function(){
      this.loadNavbarJSON();
    },
    render: function(){
      return(
        &lt;nav className="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
          &lt;div className="container-fluid"&gt;
            &lt;div className="navbar-header"&gt;
              &lt;NavbarBrand /&gt;
            &lt;/div&gt;
            &lt;NavbarLinks data={this.state.data} /&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      );
    }
  });
  
  var Header = React.createClass({
    render: function(){
      return(
        &lt;Navbar /&gt;
      );
    }
  });
  
  React.renderComponent(
    &lt;Header /&gt;,
    document.getElementById('render')
  );
  </code></pre>