Why do i get this parsing error on the render part?

Question

Please help me with this, i don't understand what's wrong. I got this code and i have the following error:

Syntax error: Unexpected token, expected ";" It points to first curly bracket after render.

THIS IS THE CODE

import Clarifai from 'clarifai'
import Navigation from './components/Navigation/navigation';
import FaceRecognition from './components/FaceRecognition/facerecognition';
import Logo from './components/Logo/logo';
import ImageLinkForm from './components/ImageLinkForm/imagelinkform';
import Rank from './components/Rank/rank';
import './App.css';
import  'tachyons'
import Particles from 'react-particles-js';




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


const particlesOptions = {
    particles: {
        number: {
          value: 70,
          density: {
            enable: true,
            value_area: 800
          }
        }
    }
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      input: '',
      imageUrl: '',
      box:{}
    }
  }
};
  calculateFaceLocation = (data) => {
      const clarifaiFace = data.output[0].data.regions[0].region_info.bounding_box;
      const image = document.getElementById('inputimage');
      const width = Number(image.width);
      const height = Number(image.height);
      console.log(width,height);
    };

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

  onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input});
    app.models
    .predict(
      Clarifai.FACE_DETECT_MODEL, 
      this.state.input)
    .then(response => this.calculateFaceLocation(response))
    .catch (err => console.log(err));
  
    
  render() {
    return (
      <div className="App">
        <Particles className='particles'
          params={particlesOptions}
        />,
        <Navigation />,
        <Logo />,
        <Rank />,
        <ImageLinkForm 
        onInputChange={this.onInputChange} 
        onButtonSubmit={this.onButtonSubmit}
        />,
        <FaceRecognition imageUrl={this.state.imageUrl} />
      </div>
    );
  }
export default App;

Honestly, i can't figure out what's wrong. I have checked a few times but i guess the error just eludes me. Thank you for you time guys.

Answer 1

I have cleaned up, formatted and fixed missing "}" in your code.

import Clarifai from "clarifai";
import Navigation from "./components/Navigation/navigation";
import FaceRecognition from "./components/FaceRecognition/facerecognition";
import Logo from "./components/Logo/logo";
import ImageLinkForm from "./components/ImageLinkForm/imagelinkform";
import Rank from "./components/Rank/rank";
import "./App.css";
import "tachyons";
import Particles from "react-particles-js";

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

const particlesOptions = {
    particles: {
        number: {
            value: 70,
            density: {
                enable: true,
                value_area: 800,
            },
        },
    },
};

class App extends Component {
    constructor() {
        super();
        this.state = {
            input: "",
            imageUrl: "",
            box: {},
        };
    }
    calculateFaceLocation = (data) => {
        const clarifaiFace =
            data.output[0].data.regions[0].region_info.bounding_box;
        const image = document.getElementById("inputimage");
        const width = Number(image.width);
        const height = Number(image.height);
        console.log(width, height);
    };

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

    onButtonSubmit = () => {
        this.setState({ imageUrl: this.state.input });
        app.models
            .predict(Clarifai.FACE_DETECT_MODEL, this.state.input)
            .then((response) => this.calculateFaceLocation(response))
            .catch((err) => console.log(err));
    };

    render() {
        return (
            <div className="App">
                <Particles className="particles" params={particlesOptions} />,
                <Navigation />,
                <Logo />,
                <Rank />,
                <ImageLinkForm
                    onInputChange={this.onInputChange}
                    onButtonSubmit={this.onButtonSubmit}
                />
                ,
                <FaceRecognition imageUrl={this.state.imageUrl} />
            </div>
        );
    }
}
export default App;

Answer 2

onButtonSubmit is missing }:

onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input});
    app.models
    .predict(
      Clarifai.FACE_DETECT_MODEL, 
      this.state.input)
    .then(response => this.calculateFaceLocation(response))
    .catch (err => console.log(err));
}; // here it is (should be :))