ReactJS this.state null

Question

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.

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"

I tried to look around for solutions but could not find anything.

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.

/** @jsx React.DOM */

var conf = {
    companyName: "Slant Hosting"
  };

var NavbarLinks = React.createClass({
  render: function(){
    var navLinks = this.props.data.map(function(link){
      return(
        <li><a href={link.target}>{link.text}</a></li>
      );
    });
    return(
      <ul className="nav navbar-nav">
        {navLinks}
      </ul>
    )
  }
});

var NavbarBrand = React.createClass({
  render: function(){
    return(
      <a className="navbar-brand" href="#">{conf.companyName}</a>
    );
  }
});

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(
      <nav className="navbar navbar-default navbar-fixed-top" role="navigation">
        <div className="container-fluid">
          <div className="navbar-header">
            <NavbarBrand />
          </div>
          <NavbarLinks data={this.state.data} />
        </div>
      </nav>
    );
  }
});

var Header = React.createClass({
  render: function(){
    return(
      <Navbar />
    );
  }
});

React.renderComponent(
  <Header />,
  document.getElementById('render')
);

Answer 1

Using ES6, the initial state must be created in your constructor for the React component class, like this:

constructor(props) {
    super(props)
    this.state ={
    // Set your state here
    }
}

See this documentation.

Answer 2

This question has already been answered, but I came here by having a problem that can easily happen to anyone.

I was getting a console.log(this.state) to log null in one of my methods, just because I didn't write:

this.handleSelect = this.handleSelect.bind(this);

in my constructor.

So, if you're getting a null for this.state in one of your methods, check if you have bounded it to your component.

Cheers!

Edit (because of @tutiplain's question)

Why was I getting null for this.state?

Because I wrote console.log(this.state) in the method which wasn't bounded to my class (my handleSelect method). That caused this to point to some object higher in the object hierarchy (most probably the window object) which doesn't have a property named state. So, by binding my handleSelect method to this, I assured that whenever I write this in that method, it will point to the object in which the method is in.

I encourage you to read a really good explanation for this here.

Answer 3

this.state.data is null in your example because setState() is async. Instead you can pass a callback to setState like so:

loadNavbarJSON: function() {
    $.ajax({
      url: "app/js/configs/navbar.json",
      dataType: 'json',
      success: function(data) {
        console.log(data);

        this.setState({data: data}, function(){
          console.log(this.state.data);
        }.bind(this));

      }.bind(this),
    });
  }

https://facebook.github.io/react/docs/component-api.html#setstate

Answer 4

More actual answer, for using ES7+ Classes:

export class Counter extends React.Component {
  state = { data : [] };
  ...
}

ES6 Classes (alredy was answered)

export class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data : [] };
  }
  ...
}

Answer 5

I had similar issue. In my case it was webpack-dev-server not re-compiling my stuff on the run properly.
I used debugger to check variables and it was showing me weird stuff, so I figured it's something compilation related.
I just restarted the dev server to get it working again.
I think it's worth keeping in mind that such things do happen.