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.