He convertido un punto final JSON en una matriz de JavaScript y lo he mapeado para obtener los valores clave que necesito. 3 de 4 son valores de texto, pero el primero es una imagen y solo muestra el enlace URL. Intenté mapear a través de la misma matriz y mostrar solo las imágenes y funciona, pero luego no puedo fusionar los dos elementos en un solo div.
El código:
export default function Pokes() { const [pokemonData, setPokemonData] = React.useState({}); React.useEffect(() => { fetch( "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json" ) .then((res) => res.json()) .then((data) => setPokemonData(data.pokemon)); }, []); const allPokes = pokemonData; const pokemons = Object.values(allPokes); const pokesData = pokemons.map(pokemon => `${pokemon.img} ${pokemon.num} ${pokemon.name} ${pokemon.type}`); let renderedOutput = pokesData.map(item => <div className="infodiv" style={{ flex: 1, flexBasis: "33%" }}> {item} </div>) return ( <main> <div> <div style={{ display: "flex", flexWrap: "wrap" }}>{renderedOutput}</div> </div> </main> ); }const pokesData = pokemons.map(pokemon => `${pokemon.img} ${pokemon.num} ${pokemon.name} ${pokemon.type}`) Esta línea de código devolvería "nombre del número de URL de la imagen", lo que realmente desea es la imagen real que requiere el uso de la etiqueta HTML img . Implementando esto con su código, se convertiría en:
export default function Pokes() { const [pokemonData, setPokemonData] = React.useState({}); React.useEffect(() => { fetch( "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json" ) .then((res) => res.json()) .then((data) => setPokemonData(data.pokemon)); }, []); const allPokes = pokemonData; const pokemons = Object.values(allPokes); let renderedOutput = pokemons.map(pokemon => <div className="infodiv" style={{ flex: 1, flexBasis: "33%" }}> <img src={pokemon.img} /> {pokemon.num} {pokemon.name} </div>) // Note the code change above ^^^ return ( <main> <div> <div style={{ display: "flex", flexWrap: "wrap" }}>{renderedOutput}</div> </div> </main> ); }Aquí está la solución si eso es lo que buscas. Aquí está codesandbox para el siguiente código;
import { useState, useEffect, useCallback } from "react"; import axios from "axios"; const URI = "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json"; const App = () => { const [values, setValues] = useState([]); const getPokomonGo = useCallback(async () => { try { const { data } = await axios.get(URI); if (data) setValues(data?.pokemon); } catch (err) { console.log({ err }); } }, []); useEffect(() => { getPokomonGo(); }, [getPokomonGo]); return ( <div className="App"> <h1>Pokemon Images</h1> {values && values.map(({ num, name, img }) => ( <img src={img} alt={name} key={num} /> ))} </div> ); }; export default App;<img src={{item.img}} alt="Lamp" width="100" height="100">