react loses 'this' context inside promise [duplicate]

This is where arrow functions come in. Arrow Functions basically maintain the this from above and don't override it within the function. You can read more on the MDN. Remember it is a newer feature so some older browsers won't support it.

The following code is an example using arrow functions based on your code in your question.

axios.get(url)  .then((response) => {    this.props.handler(response.data.thing)  })  .catch((error) => {    console.log(error)  })

Edit:

The other way to do this without ES6 syntax is by setting a variable outside of the function. The other example you provided in your question will work even if arrow functions aren't supported. But you can also use the following code as well.

var self = this;axios.get(url)  .then(function (response) {    self.props.handler(response.data.thing)  })  .catch(function (error) {    console.log(error)  })

This will let you access the correct this by using the variable created (self). Of course the downside to this as mentioned is it is slightly more clunky and not quite as clean as using an arrow function.

For more information about browser compatibility with Arrow Functions you can look at Can I use. Although if you are using React there is a good chance you could be using Babel as a compiler which should take care of converting ES6 syntax and making it more browser compatible.