Unexpected token, expected “;” in reactjs

Question

After moving the project coding on Sublime to VSCode and adding some functions, I got thrown this syntax error with my code. Can anyone give me advice on how to fix it?

 import React, {Component} from 'react'; import Particles from 'react-particles-js'; import Clarifai from 'clarifai'; import render from 'react-dom'; import Navigation from './components/Navigation/Navigation'; import Logo from './components/Logo/Logo'; import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm'; import FaceRecognition from './components/FaceRecognition/FaceRecognition'; import Rank from './components/Rank/Rank'; import './App.css'; const app = new Clarifai.App({ apiKey: '' }); class App extends Component { constructor() { super(); this.state = { input: '', imageUrl: '', box: { } } } calculaFace = (data) => { const clarifaiFace = data.outputs[0].data.region[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) } } } displayFaceBox = (box) => { console.log(box); this.setState({box: box}); } onInputChange = (event) => { this.setState({input:event.target.value}); } onSubmit = () => { this.setState({imageUrl: this.state.input}) app.models.predict(Clarifai.FACE_DETECT_MODEL,this.state.input).then(response => this.displayFaceBox(this.calculaFace(response))).catch(err => console.log(err)); } function render() { return ( <div className="App"> <Particles className='particles' params={{ particles: { number: { value: 100, density: { enable: true, value_area: 1000, } }, }, }} /> <Navigation/> <Logo/> <Rank/> <ImageLinkForm onInputChange ={onInputChange} onSubmit = {onSubmit}/> <FaceRecognition box={box}imageUrl={imageUrl}/> </div> ); }} export default App;

this is an error :

Failed to compile.

./src/App.js
SyntaxError: /Users/ngocnguyen/final-project/src/App.js: Unexpected token, expected ";" (64:9)

  62 | 
  63 | 
> 64 | render() {
     |          ^
  65 |     return (
  66 |       <div className="App">
  67 |       <Particles className='particles'

I have tried:

1. define a function outside of an ES6 class and undefined this function for other calls inside, like this:

function render() {
    return (
      <div className="App">
      <Particles className='particles'
        params={{ 
          particles: { 
            number: { 
              value: 100, 
              density: { 
                enable: true, 
                value_area: 1000, 
              } 
            }, 
          }, 
        }} 
      /> 
        <Navigation/>
        <Logo/>
        <Rank/>
        <ImageLinkForm 
          onInputChange ={onInputChange}
          onSubmit = {onSubmit}/>
        <FaceRecognition box={box}imageUrl={imageUrl}/>
      </div>
      );
      }}

... but nothing change

Answer 1

There are a couple of issues with your code.

• An unnecessary curly brace at the end of the calculaFace method.
• An unnecessary function keyword before the render method.

Here's the fixed code.

import React, { Component } from "react"
import Particles from "react-particles-js"
import Clarifai from "clarifai"
import render from "react-dom"
import Navigation from "./components/Navigation/Navigation"
import Logo from "./components/Logo/Logo"
import ImageLinkForm from "./components/ImageLinkForm/ImageLinkForm"
import FaceRecognition from "./components/FaceRecognition/FaceRecognition"
import Rank from "./components/Rank/Rank"
import "./App.css"

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

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

  calculaFace = (data) => {
    const clarifaiFace = data.outputs[0].data.region[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,
    }
  }

  displayFaceBox = (box) => {
    console.log(box)
    this.setState({ box: box })
  }

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

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

  render() {
    return (
      <div className="App">
        <Particles
          className="particles"
          params={{
            particles: {
              number: {
                value: 100,
                density: {
                  enable: true,
                  value_area: 1000,
                },
              },
            },
          }}
        />
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm onInputChange={onInputChange} onSubmit={onSubmit} />
        <FaceRecognition box={box} imageUrl={imageUrl} />
      </div>
    )
  }
}

export default App