React - this.props looks undefined

Question

I'm going through a React tutorial. Here's the code that doesn't work when I add a property to a Greeter object

let Greeter=React.createClass({
    render: ()=>{
      let name=this.props.name;
      return (<div>
      <h1>Hello {name}!</h1>
    </div>);
  }
});



ReactDOM.render(
  <Greeter name ="Your name"/>,
  document.getElementById("app")
);

The doesn't render at all, when I'm using Firefox, here's what I get:

unreachable code after return statementbrowser.min.js:37:6409 TypeError: undefined has no properties

Answer 1

The reason why this does not work is because you use an arrow function, inside an ES5 component. this is then undefined due to the arrow function, per the MDN documentation for arrow functions:

An arrow function expression has a shorter syntax compared to function expressions and does not bind its own this, arguments, super, or new.target. (emphasis mine)

React does something called 'autobinding' which automatically binds this for your functions in a component to refer to the component. But because you are using an arrow function, binding does not work (due to the fact, as mentioned earlier, arrow functions do not bind this). That means this is not bound thus it is undefined in your render function. This causes the error as undefined does not have any properties.

The solution is to use a regular function instead of an arrow function with React's autobinding:

render: function() {
    //...
}

React autobind's this so that it refers to the component in functions so it will work fine. If you are using ES6, you can use an ES6 method like so:

render() {
    //...
}

This is just syntactical sugar in ES6 for a regular function, and binding will occur. Thus, this will refer to the component, not undefined and will have receive props correctly.