CODEWITHSUNDEEP
javascriptreactjs
patosky
patosky

Reputation: 25

npm compiling warning (Parsing error: Unexpected token, expected ";" )

I have been getting errors on the code below. How do I fix it, please???. The issue is on line 22. It's not compiling on npm//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

import React from 'react';
import Particles from 'react-particles-js';
import Navigation from './components/Navigation/Navigation';
import Logo from './components/Logo/Logo';
import Rank from './components/Rank/Rank';
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
import './App.css';

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

function App() {
  constructor() {
    super();
    this.state = {
      input: '',
    }
  }

  onInputChange = (event) => {
    console.log(event);
  }

  return (
    <div className="App">
      <Particles className='particles'
        params={particlesOptions}
      />
      <Navigation />
      <Logo />
      <Rank />
      <ImageLinkForm onInputChange={this.onInputChange}/>
       {/*<FaceRecognition />*/}
    </div>
  );
}

export default App;

Upvotes: 1

Views: 72

Answers (1)

oliverwebr
oliverwebr

Reputation: 627

As Gabriele mentioned in the comments. You have kind of a mix of a function component and a class component. To make this a proper class component we need to extend React.Component and we need a render method.


import React from 'react';
import Particles from 'react-particles-js';
import Navigation from './components/Navigation/Navigation';
import Logo from './components/Logo/Logo';
import Rank from './components/Rank/Rank';
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
import './App.css';

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

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      input: '',
    }
  }

  onInputChange = (event) => {
    console.log(event);
  }

  render(){
    return (
      <div className="App">
        <Particles className='particles'
          params={particlesOptions}
        />
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm onInputChange={this.onInputChange}/>
         {/*<FaceRecognition />*/}
      </div>
    );
  }

}

export default App;

Upvotes: 2

Related Questions