how to bind this in a recursive function inside of a function in React?

Question

can someone tell me how to make this work in the loop fuction? how can I bind the loop function to constructor?

class Cookcoo extends React.Component{
    constructor(props){
        super(props);
        this.state={
            test:false
        }
        this.onPlay=this.onPlay.bind(this)
    }
    onPlay(){
            (function loop() {
            let randomTime = Math.round(Math.random() * 3000) + 500;
            setTimeout(()=> {
                this.setState({test:true}); 
                setTimeout(()=>this.setState({test:false}),500)
                loop();
            }, randomTime);

        }());
    }

one simple solution is let that = this; and use that inside loop function. — Mayank Shukla
– Mayank Shukla, Commented Jan 11, 2018 at 16:22

Mayank Shukla · Accepted Answer · 2018-01-11 16:27:57Z

2

One simple solution is use a extra variable to store the reference of this (class context) and use that variable inside loop function.

Like this:

onPlay(){

    let that = this;

    (function loop() {
        let randomTime = Math.round(Math.random() * 3000) + 500;
        setTimeout(()=> {
            that.setState({test:true}); 
            setTimeout(()=>that.setState({test:false}),500)
            loop();
        }, randomTime);
    }());
}

answered Jan 11, 2018 at 16:27

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Khatri · Accepted Answer · 2018-01-11 16:31:21Z

1

You could bind the self executing function and then call the inner function with .call() like

onPlay() {
    (function loop() {
      let randomTime = Math.round(Math.random() * 3000) + 500;
      setTimeout(() => {
        console.log(this);
        this.setState({ test: true });
        setTimeout(() => this.setState({ test: false }, console.log(this.state.test)), 500)
        loop.call(this);
      }, randomTime);

    }.bind(this)());
  }

answered Jan 11, 2018 at 16:31

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Collectives™ on Stack Overflow

how to bind this in a recursive function inside of a function in React?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related