Is there a reason why my API response success block is not executing my function calls?

Question

Relatively new to web development and I am currently taking a course which builds a face recognition application using React and Clarifai API. The application has a search box where the user pastes an image URL, which is then supplied to the Clarifai API. I have created a function called 'calculateFaceLocation' that should accept the API response and perform an action on. My issue is that I am receiving the required response from the Clarifai API (Which I can confirm by console logging 'response' in my success block) but when I call 'this.calculateFaceLocation(response)' it appears that my function is not being excecuted. I seems like it has to be something trivial that I am missing but any help would be appreciated. Just to note I have removed my personal API key from the below code block

import React, { Component } from 'react';
import ParticlesBG from './components/Particles/Particles.js';
import Navigation from './components/Navigation/Navigation.js';
import Logo from './components/Logo/Logo.js';
import Rank from './components/Rank/Rank.js';
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm.js';
import FaceRecognition from './components/FaceRecognition/FaceRecognition.js';
import Clarifai from 'clarifai';

window.process = {
    env: {
        NODE_ENV: 'development'
    }
}

const app = new Clarifai.App({
  apiKey: " "
});

class App extends Component {
  constructor() {
    super()
    this.state = {
      input: "",
      imageURL:"",
      box:{}
    }
  }

  calculateFaceLocation = (data) => {
    console.log(data);
  };

  onInputChange = (event) => {
    this.setState({input: event.target.value});
  };

  onButtonClick = () => {
    this.setState({imageURL: this.state.input});
    app.models.predict({ 
                 id: 'face-detection', 
                 name: 'face-detection', 
                 version: '6dc7e46bc9124c5c8824be4822abe105', 
                 type: 'visual-detector', 
             },
             this.state.input
            )
    .then(
      function(response) {
        this.calculateFaceLocation(response);
      },
      function(err) {
        console.log(err);
      }
    );
  };

  render() {
    return (
      //My JSX code is in here but not required to show.
}

export default App;

Tried to console.log(response) in my response success block which worked and confirmed response was received. However, any function I attemt to run withing the success block appears not to excecute.

Answer 1

The issue is that your then callbacks are wrapping as inline functions like this:

function(response) {
  this.calculateFaceLocation(response);
}

this in this context is the context inside the function (not the class instance), replace your inline functions with arrow functions, to have this be the instance of the class:

(response) => {
   this.calculateFaceLocation(response);
}

You are probably receiving the following error:

Uncaught SyntaxError: Unexpected identifier 'calculateFaceLocation'