Como estás poniendo la promesa dentro del jsx no funciona. Así que lo que hice fue justo cuando obtengo los datos, obtener la imagen, luego concatenar los objetos de respuesta y ya al final modificar el estado del componente.
import React, { useState, useEffect } from "react";
const Inicio = () => {
const [pokemons, setPokemons] = useState([]);
const url = "https://pokeapi.co/api/v2/pokemon?limit=15&offset=100";
const getimg = async (pkmnurl) => {
try {
let res = await fetch(pkmnurl);
let data = await res.json();
return data.sprites.back_default;
} catch (e) {
console.log(e);
}
};
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then(async (data) => {
for (var i = 0; i < data.results.length; i++) {
const img = await getimg(data.results[i].url);
Object.assign(data.results[i], {
url: img,
});
}
setPokemons(data.results);
})
.catch((e) => console.log(e));
}, []);
return (
<div>
{pokemons.map((pokemon) => {
return (
<div key={pokemon.name}>
{pokemon.name}
<img src={pokemon.url} alt={pokemon.name} />
</div>
);
})}
</div>
);
};
export default Inicio;