this.setData is not a function in react

Question

I am getting this weird issue in facebook login where I get the response but after getting the response, I am not able to dispatch actions. Therefore, I wrote a function to do this but I am getting this.setData is not a function.

testAPI() {
  window.FB.api('/me' ,function(response) {
     console.log("testAPI",response);
     if(response){
         userProfile = {
                access_token:accessToken,
                id:response.id,
                name:response.name,
                provider: "Facebook",

              };
              console.log("userProfile",userProfile);
              this.setData(userProfile);
     }
     console.log('[FacebookLoginButton] Successful login for: ', response);
  });
}

setData = userProfile => {
  this.setState(
    {
      userData: userProfile
    },
    () => {
      console.log("inside setData");
      if (userProfile !== undefined) {
        console.log("inside callback", userProfile);
        this.props.loginUser(this.state.userData);
      }
    }
  );
};

Answer 1

This will help ( https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56 ) [ You need to bind function in order to set context of this ]

Answer 2

You have to use arrow function, or bind function to set correct context of this.

window.FB.api('/me', response => {
    // function body
}