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

Question

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;

What is a constructor doing inside a function ? Just remove it, or convert the function to a Class (and add a render method). — Gabriele Petrioli
– Gabriele Petrioli, Commented Jun 4, 2020 at 22:58
@GabrielePetrioli is right. You might be confusing Functional Components and Class Components. Functional components are more popular now, but you should make sure you know the difference. The constructor() function used to be very popular in class components, but it's not used in functional components. — georgedum
– georgedum, Commented Jun 4, 2020 at 23:11

oliverwebr · Accepted Answer · 2020-06-04 23:16:16Z

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;

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related