Error returning information from an api in a secondary component by map (React Typescript)

Question

I'm trying to return a page with the information from the PokeApi, but it just returns a white screen without the information. I managed through the API to return all pokemons, but I'm trying to create a page with information for each pokemon selected.

PokemonPage folder

 import * as C from './styles';

import { useEffect, useState } from 'react';
import { useApi } from '../../Hooks/useApi';
import { useParams } from 'react-router-dom';
import { SinglePokemonTS } from '../../types/SinglePokemon';

import SinglePokemon from '../../Components/SinglePokemon';

const PokemonPage = () => {
  const api = useApi();
  const { name } = useParams();

  const [loading, setLoading] = useState(true);
  const [pokemon, setPokemon] = useState<SinglePokemonTS[]>([]);

  useEffect(() => {
    if (name) {
      getPokemon(name);
      console.log(pokemon)
    } 
  }, [loading])

  const getPokemon = async (param: string) => {
    const pokemon = await api.getPokemon(param)
    setPokemon(pokemon)
    setLoading(false);
  }
  
  return (
    <C.PokemonPage>
      {loading &&
        <div>Loading...</div>
      }
      {!loading &&
        pokemon.map((item) => (
          <SinglePokemon
            sprites={item.sprites}
            id={item.id}
            name={item.name}
            types={item.types} 
          />
        ))
      }
    </C.PokemonPage>
  )
}

export default PokemonPage

SinglePokemon component:

import * as C from './styles';

import { SinglePokemonTS } from '../../types/SinglePokemon'

const SinglePokemon = ({
    id,
    name, 
    sprites,
    types,
}: SinglePokemonTS) => {
  return (
    <C.PokemonData>
        <img src={sprites.front_default} alt="" />
        <h1>{name}</h1>
        <p>id: {id}</p>
        {types &&
          <p>tipo: <span>{types.map(item => item.type.name)}</span></p>
        }
    </C.PokemonData>
  )
}

export default SinglePokemon

SinglePokemon.ts type:

export interface SinglePokemonTS {
    id: number;
    name: string;
    sprites: {
        front_default: string;
    };
    types: {
        type: {
            name: string;
        }
    } []
}

console errors:

index.tsx:33 Uncaught TypeError: pokemon.map is not a function
    at PokemonPage (index.tsx:33:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

react-dom.development.js:18687 The above error occurred in the <PokemonPage> component:

    at PokemonPage (http://localhost:3000/main.f4037b6ee75101fad614.hot-update.js:198:66)
    at MainRoutes (http://localhost:3000/static/js/bundle.js:1377:69)
    at App
    at Router (http://localhost:3000/static/js/bundle.js:44818:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:43627:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Answer 1

You are setting the pokemon list to the response you get from the API call. I can't see the response but i guess there is some kind of data that you should set the pokemons array to.. You can send me the response you get from the api and ill try help you out with it