CODEWITHSUNDEEP
javascriptreactjs
Adewale Charles
Adewale Charles

Reputation: 55

failed to compile Unexpected token, expected ";

I am new to react, in fact, I am just learning, so during my course of testing out my skill I ran into this error below:

./src/App/App.js
  Line 8:21:  Parsing error: Unexpected token, expected ";"

   6 | 
   7 | function App() {
>  8 |   constructor(props){
     |                     ^
   9 |     super(props);
  10 |     http.getProducts();
  11 |   }

here is my whole app.js component where the error is originating from

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import HttpService from "../services/http-service";
 const http = new HttpService();

function App() {
  constructor(props){
    super(props);
    http.getProducts();
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h2>Welcome To Dotman</h2>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

and here is my http-service.js file please anyone I need help on this, i am kinda stuck here for hours and it so frustrating.

import "whatwg-fetch";

class HttpService {
  getProducts = () => {
    fetch("https://netflix-unofficial.p.rapidapi.com/api/genres", {
      method: "GET",
      headers: {
        "x-rapidapi-host": "netflix-unofficial.p.rapidapi.com",
        "x-rapidapi-key": "927d419d09msh1a5d9dc4b243fd4p192b83jsnd70ea8fd0082",
      },
    }).then((response) => {
      console.log(response.json());
    });
  };
}

export default HttpService;

Upvotes: 0

Views: 490

Answers (1)

Max Gram
Max Gram

Reputation: 695

It seems like the problem is 'constructor' being created inside regular JS function. Try changing it to this:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import HttpService from "../services/http-service";
 const http = new HttpService();

class App extends React.Component {
  constructor(props){
    super(props);
  }

  componentDidMount(){
    http.getProducts();
  }

  render(){
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome To Dotman</h2>
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Also note, componentDidMount is the right place to make any API calls

Upvotes: 1

Related Questions