Keep getting TypeError: .map is not a function

I'm making a react.js app using the Pokemon API to expand my understanding of React. I have run into a problem when trying to map the state pokeList. Every time I render the page it says TypeError: pokeList.map is not a function. I have been trying several different things for hours now and I haven't been able to find anything useful on Google.

The comment at the bottom of the code is the other method that I was trying and it was returning the same error.

import React, { useEffect, useState } from 'react';  import axios from 'axios';    import Card from '../components/CardView';  import Selected from '../components/Selected';    const Main = (props) => {      const [pokeList, setPokeList] = useState([]);    const [selectedPokemon, setSelectedPokemon] = useState("");    const [selectedPokeData, setSelectedPokeData] = useState([]);    const [loaded, setLoaded] = useState(false);    let renderNum = 10;      useEffect(() => {      axios.get("https://pokeapi.co/api/v2/pokemon?limit=" + renderNum)        .then(res => setPokeList(res.data))    }, [])      useEffect(() => {      axios.get("https://pokeapi.co/api/v2/pokemon/" + selectedPokemon)        .then(res => setSelectedPokeData(res.data))        .then(setLoaded(true))    }, [])      return(      <div className="container">        {loaded === false ?          <h1>loading...</h1> :          <div className="row">          <div className="col">            {pokeList.map((pokemon, idx) =>              <div key={idx}>                <Card pokeData={pokemon} selectedPokemon={selectedPokemon} />              </div>            )}          </div>          <div className="col">            <Selected pokeData={selectedPokeData}/>          </div>        </div>        }      </div>    )  }    export default Main;    // {pokeList.map(pokemon => {  //   return (  //       <div>  //         <Card allPokeData={pokemon} currentSelectedPokemon={selectedPokemon}/>  //       </div>  //     )  //   })}  

My goal is that data from each individual pokemon will be sent through the props and will render each pokemon's name, type, and picture. So when the page is first rendered there should be 10 pokemon displayed with their info.

https://stackoverflow.com/questions/66727905/keep-getting-typeerror-map-is-not-a-function March 21, 2021 at 08:56AM