componentDidMount unexpected token error [React.js]

Question

I'm currently working on creating a PokeDex by using the PokeApi. I'm trying to complete the PokemonList, that will contain all the different PokemonCard buttons.

I am receiving expected ";" error for my componentDidMount and I'm unsure why.

The code for the page is

import React from "react";
import PokemonCard from "./PokemonCard";
import "../ui/PokemonList.css";
import axios from 'axios';

export default class PokemonList extends Component {
  state = {
    url: "https://pokeapi.co.api.v2.pokemon/",
    pokemon: null
  };
}

componentDidMount() {
  const res = axios.get(this.state.url);
  this.setState({pokemon: res.data['results'] });
}


const PokeList = () => {
  return (
    <section className="poke-list">
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
    </section>
  );
};

//export default PokeList;

It is marking the error on the { symbol after componentDidMount().

The error remains there, even after I add a semi-colon after the curly brackets, even though I don't think the semi-colon is necessary, since the guide I'm following doesn't do it.

Is there some simple rule that I'm breaking? I'm new to React / JavaScript.

edit ----------------------------------------------------

My Dashboard.Js code is

import React, { Component } from "react";

import PokeList from "../pokemon/PokemonList";

export default class Dashboard extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col">
            <PokeList />
          </div>
        </div>
      </div>
    );
  }
}

I am getting the following error now

./src/components/layout/Dashboard.js
Attempted import error: '../pokemon/PokemonList' does not contain a default export (imported as 'PokeList').

Answer 1

probably because

import React from "react";
import PokemonCard from "./PokemonCard";
import "../ui/PokemonList.css";
import axios from 'axios';

export default class PokemonList extends Component {
state = {
  url: "https://pokeapi.co.api.v2.pokemon/",
  pokemon: null
};
} <----- extra curly brace remove this

componentDidMount() {
  const res = axios.get(this.state.url);
  this.setState({pokemon: res.data['results'] });
}

//keep this function inside class
PokeList = () => {
  return (
    <section className="poke-list">
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
    </section>
  );
};

   render() {
   return(
   <div>{this.Pokelist}</div>
)
}}
//export default PokeList; // <=== remove this

Your component did mount was outside the class component.

to make your current code work --

import React from "react";
import PokemonCard from "./PokemonCard";
import "../ui/PokemonList.css";
import axios from 'axios';

export const PokemonList = class PokemonList extends Component {
  state = {
    url: "https://pokeapi.co.api.v2.pokemon/",
    pokemon: null
  };


componentDidMount() {
  const res = axios.get(this.state.url);
  this.setState({pokemon: res.data['results'] });
}
} <==== class component ended

export const PokeList = () => {
  return (
    <section className="poke-list">
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
    </section>
  );
};

Dashboard js

import React, { Component } from "react";

import {PokeList} from "../pokemon/PokemonList";

export default class Dashboard extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col">
            <PokeList />
          </div>
        </div>
      </div>
    );
  }
}

Answer 2

The first issue is invalid url.

Change url with: https://pokeapi.co/api/v2/pokemon/

See code example:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import PokemonList from "./components/PokemonList";

import "./styles.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <PokemonList />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

import React, { Component } from "react";
import axios from "axios";
import PokemonCard from "./PokemonCard";

class PokemonList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url: "https://pokeapi.co.api.v2.pokemon/",
      pokemons: []
    };
  }

  componentDidMount = () => {
    axios
      .get("https://pokeapi.co/api/v2/pokemon/")
      .then(response => {
        const data = response.data.results;
        this.setState({ pokemons: data });
      })
      .catch(error => {
        console.log(error);
      });
  };

  render() {
    const { pokemons } = this.state;
    return (
      <div className="pokemon-list">
        {pokemons.length > 0 &&
          pokemons.map(pokemon => {
            return <PokemonCard pokemon={pokemon} />;
          })}
      </div>
    );
  }
}

export default PokemonList;

import React, { Component } from "react";
class PokemonCard extends Component {
  render() {
    const { pokemon } = this.props;
    console.log(pokemon);
    return (
      <div className="pokemon-card">
        <p>Name: {pokemon.name}</p>
        <p>
          Url: <a href={pokemon.url}>{pokemon.url}</a>
        </p>
      </div>
    );
  }
}

export default PokemonCard;