Skip to main content
1 de 2

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) => {
        var pokemons = [];
        for (var i = 0; i < data.results.length; i++) {
          const img = await getimg(data.results[i].url);
          const pokemon = Object.assign(data.results[i], {
            url: img,
          });
          pokemons.push(pokemon);
        }
        setPokemons(pokemons);
      })
      .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;