Scope of This in a React/ES6 Class

Question

I'm having some trouble understanding the scope of this inside of ES6 classes. Here, I have component:

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      credentials: {
        v: '3.exp',
        key: null,
      },
      coordinates: {
        lat: 51.5258541,
        lng: -0.08040660000006028,
      },
    };

    Meteor.call('googleMapsApiKey', (err, res) => {
      if (!err) {
        this.setState({ key: res });
      }
    });
  }

  onMapCreated(map) {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(() => {
        this.setState({
          coordinates: {
            lat: this.lat,
            lng: this.lng,
          },
        });
      });
    } else {
      console.log('geolocation not supported');
    }

    map.setOptions({
      disableDefaultUI: true,
    });
  }

...

I get a error on line 33, which is in the onMapCreated(map) function, specifically the call to this.setState.

I suspect I'm missing sort of binding, or that the scope of this refers to navigator.geolocation and therefore no longer references the class. What do you guys think?

Related: [How to access the correct `this` / context inside a callback?](http://stackoverflow.com/q/20279484/218196) — Felix Kling, Apr 07 '16 at 15:54

Qianyue · Answer 1 · 2016-04-07T15:55:51.673

3

It's not the issue of ES6, it's the binding issue or React. You should bind your method in the constructor of React:

this.onMapCreated = this.onMapCreated.bind(this);

So that this can be recognized in your method.

Well, maybe it's the issue of ES6, see this docs of React:

With React, every method is automatically bound to its component instance (except when using ES6 class syntax).

edited Apr 07 '16 at 15:55

answered Apr 07 '16 at 15:52

Qianyue

1,767
19
24

Well, one could argue that it is rather an "issue" of JavaScript, because that's how JavaScript works. – Felix Kling Apr 07 '16 at 15:54
...or `this.onMapCreated = () => this.onMapCreated();`, or (experimentally supported in babeljs), `this.onMapCreated = this::this.onMapCreated;` – spender Apr 07 '16 at 15:55
*"maybe it's the issue of ES6"* JavaScript has always worked this way. This is not new behavior in ES6. – Felix Kling Apr 07 '16 at 15:57
@spender I don't understand why this can work, could you show me some link of that? – Qianyue Apr 07 '16 at 15:58
@Qianyue Sure: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this and https://babeljs.io/blog/2015/05/14/function-bind – spender Apr 07 '16 at 16:00
@spender Thank you so much! – Qianyue Apr 11 '16 at 10:05
awesome, an example of the utility of the traditionals function() methods – Webwoman Jan 24 '19 at 17:47

Scope of This in a React/ES6 Class

1 Answers1