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

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.

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'