Can't reference react component from inside callback

Question

In my react component I'm attempting to call the function emptyCart once a post request has been completed. However, when I call the emptyCart from inside the call back (Denoted in code as SECOND CALL), I get the error: TypeError: Cannot read property 'emptyCart' of undefined. When I call emptyCart from the beginning of the function, however, it works as expected. Sidenote, I don't ever have both calls of emptyCart in the code. Why can't I reference my component with this from inside the callback?

checkout = (order) => {
    this.emptyCart(); //FIRST CALL

    axios({
      method: 'post',
      url: '/api',
      data: {
        order:order,
      },
    })
      .then(function(response) {
        this.emptyCart(); //SECOND CALL
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

you're inside a callback function, this is no longer your component — aw04
– aw04, Commented Jul 12, 2017 at 20:57
Ah, didn't realize it worked like that. Do you have a workaround that you recommend? — Patrick Connors
– Patrick Connors, Commented Jul 12, 2017 at 20:58

aw04 · Accepted Answer · 2017-07-12 20:58:35Z

3

this is referring to the callback function. A simple fix would be to replace with an arrow function.

checkout = (order) => {
this.emptyCart(); //FIRST CALL

axios({
  method: 'post',
  url: '/api',
  data: {
    order:order,
  },
})
.then((response) => {
  this.emptyCart(); //SECOND CALL
  console.log(response);
})
.catch(error) => {
  console.log(error);
});

}

answered Jul 12, 2017 at 20:58

aw04

11.2k11 gold badges60 silver badges92 bronze badges

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

1 Comment

aw04 Over a year ago

@PatrickConnors i'd recommend reading up on the this keyword in js, will save you some future headaches

Collectives™ on Stack Overflow

Can't reference react component from inside callback

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related