Parsing error: Unexpected token, expected “;” whenever I add a constructor?

Question

Whenever I try to add a class constructor it shows this error, Unexpected token, expected ";"

I'm trying to use a constructor to initialize the internal component state but keeps giving this error. I've tried rewriting the code but it didn't work.

Without the constructor everything works fine, Please what I'm I missing?

See the image of the error

I just started learning to react last week

import React, { Component } from 'react';
import './App.css';

function App() {
  constructor(props) {
    super(props);

    this.state = {
      list,
      github
    };
  }
    const list = [
      {
        title: 'React',
        url: 'https://facebook.github.io/react/',
        author: 'Jordan Walke',
        num_comments: 3,
        points: 4,
        objectID: 0,
      },
      {
        title: 'Redux',
        url: 'https://github.com/reactjs/redux',
        author: 'Dan Abramov, Andrew Clark',
        num_comments: 2,
        points: 5,
        objectID: 1,
      },
    ];

    const github = [
      {
        id: 1,
        name: 'Sanusi Hayatu',
        username: 'hamicch',
        url: 'https://github.com/hamicch',
        repos: 24
      },
      {
        id: 2,
        name: 'Hayatu Michael',
        username: 'Azeez',
        url: 'https://github.com/azeez',
        repos: 30
      },
      {
        id: 3,
        name: 'Ridwan Abdulahi',
        username: 'ridwan',
        url: 'https://github.com/ridwan',
        repos: 50
      }
    ];
  


  return (
    <div className="App">
      {list.map(item => 
          <div key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>:  
            <span>{item.author}</span>--
            <span>{item.num_comments}</span>--
            <span>{item.points}</span>
          </div>
      )}
      <h2>GitHub Accounts</h2>
      {github.map(user => 
        <div key={user.id} class='acc'> 
          <div>
            <strong>Username: </strong>
            <a href={user.url}>{user.username}</a>
          </div>
          <div>
            <strong>Name: </strong> {user.name}
          </div>
          <div>
            <strong>Repos: </strong>
            {user.repos}
          </div>
        </div>
        )}
    </div>
  );
}

export default App;

This is the error page

Answer 1

You cannot have constructor in functional component, it is reserved for class components only.

Answer 2

The shorthand for property: a_function can only be used in an object literal or class.

You can't use it where an expression or statement is expected.

 class Foo { constructor() { this.ran = Math.random(); } } const foo = new Foo(); const bar = new Foo(); console.log(foo.ran); console.log(bar.ran);

---

You're writing a function component . There's no class, so you aren't constructing an object, so having a constructor doesn't make sense anyway.