CODEWITHSUNDEEP
javascriptreactjs
EdG
EdG

Reputation: 2351

Cannot read property 'setState' of null on button click

I am working on a reactjs application and having this issue with accessing state inside updateVert function. When I click on "play" button, actionButton get's called and from inside actionButton, updateVert gets called.

Below is my code snippet

updateVert() {

        console.log("inside upver")
        if(play) {
            cancelAnimationFrame(this.updateVert);
            return;
        }

       this.setState({xPos: this.state.xPos + 1}, ()=>{
           if(this.state.xPos >= w) {
               // stop animation...
               this.setState({xPos:0, playing:false});
           }
           ctx.clearRect(0, 0, w, h);

           // draw new one...
           ctx.beginPath();
           ctx.strokeStyle = "#19f";
           ctx.lineWidth = 2;
           ctx.moveTo(this.state.xPos, 0);
           ctx.lineTo(this.state.xPos, 200);
           ctx.stroke();

           if(this.state.playing) {
               console.log("yes true")
               requestAnimationFrame(this.updateVert)
           };
       })
        // reset rectangle content to erase previous line...
    }

    actionButton(){
        if(this.state.playing) {
            // pause...
            this.setState({playing:false},()=>{
                console.log(this.state.playing)
            })
        }
        else {
            this.setState({playing:!this.state.playing},()=>{
                console.log(this.state.playing)
                this.updateVert();
            })

        }
    }

  render() {
        return (
            <div>
                <div className="App">
                    <canvas id="DemoCanvas" width="500" height="200"></canvas>
                </div>
                <button onClick={this.actionButton.bind(this)}>{this.state.playing ? "Stop":"Play"}</button>
            </div>


    );
  }

When I click on button (play/pause), I get the error saying

TypeError: Cannot read property 'setState' of null
updateVert
src/App.js:45
  42 |      return;
  43 |  }
  44 | 
> 45 | this.setState({xPos: this.state.xPos + 1}, ()=>{
  46 |     if(this.state.xPos >= w) {
  47 |         // stop animation...
  48 |         this.setState({xPos:0, playing:false});

I have referenced updateVert function correctly. What am I doing wrong?

Upvotes: 0

Views: 165

Answers (3)

Anshul Bansal
Anshul Bansal

Reputation: 1893

It is not getting the correct this context. No need to write extra code for binding. You need to change

updateVert() { .... }

to

updateVert = () => {.... }

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You're missing to bind the context this:

In the actionButton(){ hook you're calling this.updateVert() which has no binding for this. Thus bind it inside the constructor:

this.updateVert.bind(this)

Upvotes: 3

Azamat Zorkanov
Azamat Zorkanov

Reputation: 819

Try to bind context specifically in requestAnimationFrame

requestAnimationFrame(this.updateVert.bind(this))

Hope this helps

Upvotes: -1

Related Questions