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?

Answer 1

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 }]
]