Error "Cannot read properties of undefined (reading '0')", before was working

Question

About one month ago I deploy react app, frontend on github, backend and database on heroku ("smartbrain" project from udemy Zero to Mastery). All was working good till now. About six days ago I checked if stil is working and all was perfect. 10 hours ago I recieved an email with info about knex 2.3.0 on backend server have issue of security and I need to update to 2.4.0, I did that, I checked if it works after this procedure but there was already an error. Then again I downgrade knex, but still is same error. Also I checked code of my teacher from course and there also is the same problem. Some one have any idea what happen?

That app is connecting to Clarifai Face Detection Api.

Error: TypeError: Cannot read properties of undefined (reading '0') at App.calcFaceLocation (App.js:47:1) at App.js:92:1

import { Component } from 'react';
import Navigation from './Components/Navigation/Navigation';
import SignIn from './Components/SignIn/SignIn';
import Register from './Components/Register/Register';
import Logo from './Components/Logo/Logo'
import ImgLinkForm from './Components/ImgLinkForm/ImgLinkForm';
import FaceRecognition from './Components/FaceRecognition/FaceRecognition';
import Rank from './Components/Rank/Rank';
import Particles from './Components/Particles/Particles';
import './App.css';


const initialState = {
  input: '',
  imageUrl:'',
  box:{},
  route:'signin',
  isSignedIn: false,
  user: {
    id: '',
    name: '',
    email: '',
    entries: 0,
    joined: ''
  }
}

class App extends Component {
  constructor(){
    super();
    this.state = initialState;
  }

  loadUser = (data) => {
    this.setState({user: {
      id: data.id,
      name: data.name,
      email: data.email,
      entries: data.entries,
      joined: data.joined
    }})
  }
  
  calcFaceLocation = (data) => {
    const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
    const image = document.getElementById('inputimage');
    const width = Number(image.width);
    const height = Number(image.height);
    return {
      leftCol: clarifaiFace.left_col * width,
      topRow: clarifaiFace.top_row * height,
      rightCol: width - (clarifaiFace.right_col * width),
      bottomRow: height - (clarifaiFace.bottom_row * height)
    }
  }

  dispFaceBox = (box) => {
    this.setState({box: box})
  }

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

  onPictureSubmit = () => {
    this.setState({imageUrl: this.state.input});
    fetch('https://smart-brain-api-db.herokuapp.com/imageurl', {
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        input: this.state.input
      })
    })
    .then(response => response.json())
    .then(response => {
      if(response) {
        fetch('https://smart-brain-api-db.herokuapp.com/image',{
          method: 'put',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            id: this.state.user.id
          })
        })
        .then(response => response.json())
        .then(count => {
          this.setState(Object.assign(this.state.user, { entries: count }))
        })
        .catch(console.log)
      }
      this.dispFaceBox(this.calcFaceLocation(response))
    })
    .catch(err => console.log(err));
  }

  onRouteChange = (route) => {
    if (route === 'signout') {
      this.setState(initialState)
    } else if (route === 'home') {
      this.setState({isSignedIn: true})
    }
    this.setState({route: route})
  }

  render() {
    const { isSignedIn, imageUrl, route, box } = this.state;
    return (
      <div className="App">
        <div className="particles">
          <Particles />
        </div>
        <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange}/>
        { route === 'home'
        ? <div> 
        <Logo />
        <Rank name={this.state.user.name} entries={this.state.user.entries}/>
        <ImgLinkForm onInputChange={this.onInputChange} onPictureSubmit={this.onPictureSubmit}/>
        <FaceRecognition box={box} imageUrl={imageUrl}/>
      </div>
        : ( 
        route === 'signin'
        ? <SignIn loadUser={this.loadUser} onRouteChange={this.onRouteChange}/>
        : <Register loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
          )
        }
      </div>
    );
  }
}

export default App;

About 6 hours I'm using all solutions what I find on google, but no effect. Even I didn't find anything similar. If I need to upload any file more please write me that and I will do it.

Answer 1

This issue seems not be an issue related to your implementation of the Clarifai API. To fix such an error, you may need to check that the value is not undefined before accessing the property.