Avoid using extra variable for storing reference in es6

Question

I'm already using react es6 but still in this case, I don't know how to avoid using that for this:

const that = this;

UploadApi.exec(file).then(data => {
    that.setState({ loading : false});
});

Answer 1

In this example, you are already using arrow function, so storing the reference in a separate variable is not required. You can directly use this keyword like this:

//const that = this;

UploadApi.exec(file).then(data => {
    this.setState({ loading : false});
});

Storing the reference in a separate variable required, when you use callback method like this:

const that = this;

UploadApi.exec(file).then(function(data){
    that.setState({ loading : false});
});

But, you can avoid the extra variable by using .bind(this) with callback method, like this:

//const that = this;

UploadApi.exec(file).then(function(data){
    this.setState({ loading : false});
}.bind(this));

Check this answer for complete detail, arrow function vs function declaration

Answer 2

You need to create yout UploadApi.exec that way so that after transpiling your javascript get created accordingly..like below

In you UploadApi

exec=(file:any):Q.Promise=>{

}

and then use it like below

UploadApi.exec(file).then(data => {
    this.setState({ loading : false});
});