I'm currently trying to build a small weather app in reactJS (the one for freecodecamp)

currently I'm getting the error: "Uncaught TypeError: Cannot read property 'setState' of undefined"

here is a link to the codepen:

and here is the code that's the problem I guess:

  ponentDidMount: () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        $.ajax({
          url: URL + "lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + APIKEY,
          success: (data) => {
            this.setState({data: data})
          }
        });
      })   
    }
  },

the url is not the problem. I can log the data I'm receiving to the console.

I guess it's because of the scope of this ..

any ideas?

EDIT: I don't think that this is a duplicate because I'm only using arrow functions and they are making .bind(this) obsolete

I'm currently trying to build a small weather app in reactJS (the one for freecodecamp)

currently I'm getting the error: "Uncaught TypeError: Cannot read property 'setState' of undefined"

here is a link to the codepen: http://codepen.io/rasmus/pen/aNGRJm

and here is the code that's the problem I guess:

  ponentDidMount: () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        $.ajax({
          url: URL + "lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + APIKEY,
          success: (data) => {
            this.setState({data: data})
          }
        });
      })   
    }
  },

the url is not the problem. I can log the data I'm receiving to the console.

I guess it's because of the scope of this ..

any ideas?

EDIT: I don't think that this is a duplicate because I'm only using arrow functions and they are making .bind(this) obsolete

• javascript
• ajax
• reactjs

• Possible duplicate of React this.setState is not a function – Miguel M. Commented Apr 18, 2016 at 9:18
• Well since I'm only using arrow functions .bind(this) should be obsolete or not? – rasmus1610 Commented Apr 18, 2016 at 9:27
• It seems the issue is with codepen. Even if you try to access this inside render() or ponentDidMount() method it returns undefined. Can you check putting your file in local server or through webpack-dev-server? – Rohit Singh Sengar Commented Apr 18, 2016 at 10:31
• the Problem was with the arrow functions for 'ponentDidMount' and 'getInitialState' ... With normal functions it works – rasmus1610 Commented Apr 18, 2016 at 12:35

2 Answers 2

The callback in your ajax function is called not from within your function, so the this is not pointing to what you expect, i.e., your class.

Save a reference and use it from there:

ponentDidMount: () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        let self = this;
        $.ajax({
          url: URL + "lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + APIKEY,
          success: (data) => {
            self.setState({data: data})
          }
        });
      })   
    }
  },

Try to use arrow function like follows in ponentDidMount:

ponentDidMount = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        let self = this;
        $.ajax({
          url: URL + "lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + APIKEY,
          success: (data) => {
            self.setState({data: data})
          }
        });
      })   
    }
}

You need to cache the reference to this outside of that API call. The arrow function binds this for you so you can access it within the function and it will still point to the ponent.