Can’t set state of null

Question

My code can be found here: http://codepen.io/hum4n01d/pen/apzBwP

I’m getting

app.jsx:37 Uncaught TypeError: Cannot read property 'setState' of null(…)

Answer 1 · 2017-01-05T03:04:38Z

January 5, 2017 3:04am

Remember the bit in the video where Jim talks about React automatically binding the "this" keyword so that you don't have to manually bind it when calling methods? Well that fact is only true when you use "React.createClass" to create the component classes.

If you use ES2015 style classes like you have done (which is now the officially recommended way of creating components) then you don't get any autobinding. Meaning that you do in fact need to bind "this" like is demonstrated in the video.

The simplest way of dealing with this is to add .bind(this) to methods called in your render method, so changing your render code to this:

render() {
        return (
            <div className="counter">
                <button className="counter-action decrement"> - </button>
                <div className="counter-score">{this.state.score}</div>
                <button className="counter-action increment" onClick={this.incrementScore.bind(this)}> + </button>
            </div>
        )
}

As an example will fix your issue, binding this in the render method is not the most efficient way of dealing with the issue though, since that causes you to rebind it each time the component is rendered. It is considered to be a better practice to instead bind the method in the constructor of the component, that is done with code like this:

constructor(props) {
        super(props)
        this.incrementScore = this.incrementScore.bind(this)
        this.state = {
            score: 0
        }
    }

Changing your constructor to the above will also fix your issue, above you bind this when the component is created, since the code in the constructor only runs once it is more efficient than placing the binding in the render method.

Answer 2 · 2017-01-05T03:04:48Z

January 5, 2017 3:04am

Ok well I figured it out by Googling, reading documentation, but mostly guessing. It was pretty unclear though. I needed to bind the function call to this on the button click. This was the button code I needed:

<button className="counter-action increment" onClick={this.incrementScore.bind(this)}> + </button>

Answer 3 · 2017-12-23T04:24:24Z

December 23, 2017 4:24am

See the following for the different ways binding can occur with es6 see: http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html

Welcome to the Treehouse Community

Looking to learn something new?

hum4n01d

hum4n01d

Can’t set state of null

hum4n01d

hum4n01d

3 Answers

andren

andren

hum4n01d

hum4n01d

hum4n01d

hum4n01d

andren

andren

hum4n01d

hum4n01d

andren

andren

hum4n01d

hum4n01d

hum4n01d

hum4n01d

Anthony Albertorio

Anthony Albertorio