How to display images from a JSON URL array in React-CodePudding

I have converted a JSON endpoint into a JavaScript array and I've mapped through it to get the key values I need. 3 out of 4 are text values but the first one is an image and it just displays the URL link. I have tried to map through the same array and display just the images and it works but then I cannot merge the two elements into one div.

The code:

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>
      );

}

CodePudding user response：

const pokesData = pokemons.map(pokemon => `${pokemon.img} ${pokemon.num} ${pokemon.name} ${pokemon.type}`)

This line of code would return "image url number name", what you actually want is the real image which requires the use of the img HTML tag. Implementing this with your code, it would become:

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>
      );

}

CodePudding user response：

<img src={{item.img}} alt="Lamp" width="100" height="100">

CodePudding user response：

Here is the solution if that is what you are looking after. Here is codesandbox for below code;

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;