Use this in a callback

Question

I've already read this question and this one, that should better suits my needs.

But, I still don't get the point.

I've this code

class DivRatingOverall extends React.Component  {

constructor(props) {
    super(props);
    let overallRatingMeta = wp.data.select('core/editor').getCurrentPost().meta.overall_rating;
    this.state = {overallRating: overallRatingMeta};

    this.printDivOverallRater = this.printDivOverallRater.bind(this);
}

printDivOverallRater() {
        return (
        <div id="overall-rater-panel" ref={()=>
            raterJs({
                starSize: 32,
                step: 0.1,
                showToolTip: false,
                rating: this.state.overallRating,
                readOnly: false,
                element: document.querySelector("#overall-rater-panel"),
                rateCallback: function rateCallback(rating, done) {

                    rating = rating.toFixed(1);
                    rating = parseFloat(rating);
                    this.setRating(rating);

                    wp.data.dispatch('core/editor').editPost(
                        { meta: { overall_rating: rating } }
                    );

                    //I can't access setState here
                    //this.setState({overallRating: rating});

                    done();
                }
            })
        }
        />
    )
}

render () {
    return (
        <div>
            {this.OverallRateThis}
            <div>
                {this.printDivOverallRater()}
            </div>
        </div>

    );
}

But, in the callback function, I can't access this.setState, because this now refer to raterJS, an exteranl js library that I use

How can I change the state, inside the callback?

Answer 1

Save this in a higher scope use arrow function

// arrow function preserve this
printDivOverallRater() {
    return (
    <div id="overall-rater-panel" ref={()=>
        raterJs({
            starSize: 32,
            step: 0.1,
            showToolTip: false,
            rating: this.state.overallRating,
            readOnly: false,
            element: document.querySelector("#overall-rater-panel"),
            rateCallback: (rating, done) => {

                rating = rating.toFixed(1);
                rating = parseFloat(rating);
                this.setRating(rating);

                wp.data.dispatch('core/editor').editPost(
                    { meta: { overall_rating: rating } }
                );

                I can't access setState here
                //this.setState({overallRating: rating});

                done();
            }
        })
    }
    />
)
}



//save it in higher scope
printDivOverallRater() {
    const self = this;
    return (
    <div id="overall-rater-panel" ref={()=>
        raterJs({
            starSize: 32,
            step: 0.1,
            showToolTip: false,
            rating: this.state.overallRating,
            readOnly: false,
            element: document.querySelector("#overall-rater-panel"),
            rateCallback: function(rating, done){

                rating = rating.toFixed(1);
                rating = parseFloat(rating);
                self.setRating(rating);

                wp.data.dispatch('core/editor').editPost(
                    { meta: { overall_rating: rating } }
                );

                I can't access setState here
                //this.setState({overallRating: rating});

                done();
            }
        })
    }
    />
)
}