Skip to main content
2 de 2
se eliminaron 83 caracteres en el cuerpo

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;