React/ES6: Arrow Function not binding "this" as expected

Question

Language: React/JavaScript ES6

Bundling Tool: Webpack(babel-loader 6.0.0)

Other Libs Involved : Leaflet

Problem:

With the function below the context this is bound to the component as I need.

Before:

componentDidMount: function() {

     map.on('draw:created', function(e){
        this.setState({someProp:propUpdate});
        featureGroup.addLayer(e.layer);
     }.bind(this));

    }

But when I switched it over to using the arrow function I expected an equivalent binding, but this changed to a leaflet Class o.Class.extend.e - leaving this.setState undefined.

After:

componentDidMount: function() {

    map.on('draw:created', (e) => {
        this.setState({someProp:propUpdate});
        featureGroup.addLayer(e.layer);
    });

}

Question: Why is using the arrow function not the equivalent of binding this in my case?

Refer http://stackoverflow.com/questions/38127635/thisarg-of-array-foreach-does-not-reference-as-expected/ — Rayon, Jul 02 '16 at 01:37
@Rayon that example of arrow functions in a ```forEach``` loop doesn't give any clues why my async callback is losing binding scope. Are you suggesting "lexical binding" is different from es5 binding? — Nick Pineda, Jul 02 '16 at 01:51
Which is the same as ```e``` strangely enough. I was expecting it to be ```ReactClass.createClass.Constructor``` — Nick Pineda, Jul 02 '16 at 01:57
Seems like a bug in your environment / transpiler. Although Babel should work fine. The code itself looks fine. I doubt we can help much if we cannot reproduce the issue. — Felix Kling, Jul 02 '16 at 02:04
So far I think @FelixKling is probably right. "react": "^0.14.0", "webpack": "^1.12.1", "babel-core": "^6.6.4", "babel-loader": "^6.2.4", "babel-polyfill": "^6.9.1", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0" — Nick Pineda, Jul 02 '16 at 02:08
@FelixKling Updated all babel stuff(babel-cli for server-side rendering, babel-loader for webpack, babel-core for goodluck, babel-polyfill for object assign, and all the babel-presets) I then updated webpack to the current version. Still the issue. :( — Nick Pineda, Jul 02 '16 at 02:47

score 1 · Answer 1 · answered Nov 19 '20 at 13:14

Had the same issue. Turns out the Babel-loader (in my case using the preset '@babel/preset-env') does not bind the arrow function to this as one would expect.

Using this plugin in my webpack config added the correct binding

plugins: [
  ['@babel/plugin-transform-arrow-functions', { 'spec': true }]
]

Shiva Teja · Answer 2 · 2017-12-15T02:33:05.727

Made some changes :
Arrow functions do not bind the this keyword. That's how they work. If you need to use this keyword, you need to use the bind function. Also using bind with arrow function can be weird. You might need to do something like this :

componentDidMount: function() {
    var thisKey = this;
    map.on('draw:created', (e) => {
        this.setState({someProp:propUpdate});
        featureGroup.addLayer(e.layer);
    }.bind(thisKey));

}

React/ES6: Arrow Function not binding "this" as expected

2 Answers2