How to append mapped items into a new array - arrays

Question

I have some objects that I got from map() an API URL then fetch() those URLs and got these objects as the return (see the picture).
So I want to put all of these objects into a new array so I can use the array to create a react component that will use the information from there.
Could anyone help me out to figure it out to give me some hint on how to solve this problem? thanks before.
const url = "https://pokeapi.co/api/v2/pokemon?offset=0&limit=5";
const AppProvider = ({ children }) => {
const fetchUrl = async () => {
const resp = await fetch(url);
const respData = await resp.json();
const data = respData.results;
data.map((pokemon) => {
fetchPokemon(pokemon);
});
};
const fetchPokemon = (pokemon) => {
let url = pokemon.url;
fetch(url)
.then((resp) => resp.json())
.then((pokemonData) => {
finalData(pokemonData);
});
};
const finalData = (pokemonData) => {
console.log(pokemonData, "data");
};
};

Answer 1

You can create your desired array of object by returning your data in map function and then push it into array.
const url = "https://pokeapi.co/api/v2/pokemon?offset=0&limit=5";
const AppProvider = ({ children }) => {
const fetchUrl = async () => {
const resp = await fetch(url);
const respData = await resp.json();
const data = respData.results;
const newArray = [];
data.map((pokemon) => {
newArray.push(fetchPokemon(pokemon));
});
};
const fetchPokemon = async (pokemon) => {
let url = pokemon.url;
let data = {}
return fetch(url)
.then((resp) => resp.json())
.then((pokemonData) => {
return pokemonData;
});
};
};