title: componentDidMount unexpected token error [React.js]
body: <p>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.</p>
  
  <p>I am receiving <code>expected ";"</code> error for my <code>componentDidMount</code> and I'm unsure why.</p>
  
  <p>The code for the page is</p>
  
  <pre><code>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 = () =&gt; {
    return (
      &lt;section className="poke-list"&gt;
        &lt;PokemonCard /&gt;
        &lt;PokemonCard /&gt;
        &lt;PokemonCard /&gt;
        &lt;PokemonCard /&gt;
        &lt;PokemonCard /&gt;
        &lt;PokemonCard /&gt;
        &lt;PokemonCard /&gt;
        &lt;PokemonCard /&gt;
        &lt;PokemonCard /&gt;
      &lt;/section&gt;
    );
  };
  
  //export default PokeList;
  </code></pre>
  
  <p>It is marking the error on the <code>{</code> symbol after <code>componentDidMount()</code>.</p>
  
  <p>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.</p>
  
  <p>Is there some simple rule that I'm breaking? I'm new to React / JavaScript.</p>
  
  <p>edit ----------------------------------------------------</p>
  
  <p>My Dashboard.Js code is</p>
  
  <pre><code>import React, { Component } from "react";
  
  import PokeList from "../pokemon/PokemonList";
  
  export default class Dashboard extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;div className="row"&gt;
            &lt;div className="col"&gt;
              &lt;PokeList /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I am getting the following error now </p>
  
  <pre><code>./src/components/layout/Dashboard.js
  Attempted import error: '../pokemon/PokemonList' does not contain a default export (imported as 'PokeList').
  </code></pre>