React: TypeError: Cannot read properties of undefined (reading 'map')

Question

I am newbei in React. I am getting pokemons via API. Basically I want to do detail of that pokemon When I click one of them. However, I got this error in the title. I know I have problem in my PokemonDetail.js file. But Icant get the information from app.js to pokemonDetail.js file. How can I achieve that? Thanks for your time.

Also, I am not good at english so here is my project. https://github.com/yasoyase/PokemonExercise

Here is my App.js

const [pokemons, setPokemons] = useState([]);


const getPokemonRequest = async () => {
    const url = `https://pokeapi.co/api/v2/pokemon?offset=5&limit=5`;

    const response = await fetch(url);
    const fivePokemons = await response.json();
    
    fivePokemons.results.forEach( async (pokemon) => {
        const response = await fetch (pokemon.url);
        const pokemonSpecs = await response.json();
        
        setPokemons(currentPokemons => [...currentPokemons, pokemonSpecs])
    })
};

useEffect(() => {
    getPokemonRequest();
}, []);
    return (
    <div className="main-bg">
        <div className='container'> 
                    <div className='row'>
                    
                        <PokemonList
                            pokemons={pokemons}
                            handleFavouritesClick={addFavouritePokemon}
                            favouriteComponent={AddFavourites}
                        />
                         <Route path="/pokemon/:id" component={PokemonDetail} />

                    </div>                      
            </div>
        </div>
    </div>
    
);

};

This is my Pokemonlist.js. I got the name and id from there to App.js.

const PokemonList = (props) => {
const FavouriteComponent = props.favouriteComponent;

return (
    <> 
        {props.pokemons.map((pokemon, index) => (
            <div className="col-md-3 col-sm-6 my-5">
                <StyledLink to={`pokemon/${pokemon.id}`}>
                    <Card>
                        <div className="card-outer">
                        <h5 className="card-header">{pokemon.id}</h5> 
                        <h5 className="card">{pokemon.name}</h5> 
                        </div>
                    </Card> 
                </StyledLink>
            </div>
        ))}
    </>
);

};

export default PokemonList;

As you can see When I clicked the pokemon it the url goes like: localhost/pokemon/5 for example. However, it does not show more info about that id. This is my PokemonDetail.js file.

function PokemonDetail(props) {
const FavouriteComponent = props.favouriteComponent;
const pokemons = props.pokemons;

return (

<div className="col-md-3 my-5">
    {props.pokemons.map((pokemon, index) => (
        <div className="card-outer w-100 p-2 rounded text-center">
            <h5 className="card-header">{pokemon.abilities}</h5> 
            <img src={pokemon.sprites.other.dream_world.front_default} alt="pokemon-img"/>
                            
        </div>
    ))}                         
</div>
                
            
);

};

Answer 1

.forEach does not support async functions :)

Try for await of instead