Logré conectarme a una API, que devuelve imágenes de perros. Sin embargo, estoy atascado en cómo mapear más de una imagen, sin repetir el código. Básicamente, quiero mostrar una cuadrícula con (digamos 9) imágenes, todas con diferentes imágenes de perros de esta API.
Por el momento, muestra una imagen con un objeto json asignado debajo.
Aplicación.js
import './App.css'; import './Dog.js'; import FetchAPI from './FetchAPI'; function DogApp() { return ( <div className="DogApp"> <FetchAPI /> </div> ); } export default DogApp;FetchAPI.js
import React, { useState, useEffect } from 'react' const FetchAPI = () => { const [data, setData] = useState([]); const apiGet = () => { const API_KEY = ""; fetch(`https://api.thedogapi.com/v1/images/search?API_KEY=${API_KEY}`) .then((response) => response.json()) .then((json) => { console.log(json); setData(json); }); }; useEffect(() => { //call data when pagee refreshes/initially loads apiGet(); }, []); return ( <div> {data.map((item) => ( <img src={item.url}></img> ))} My API <button onClick={apiGet}>Fetch API</button> <pre>{JSON.stringify(data, null, 2)}</pre> <br /> </div> ) } export default FetchAPI;Si su API devuelve una sola imagen a la vez y desea más imágenes al hacer clic en el botón, entonces debería agregar la nueva imagen a la matriz como:
const apiGet = () => { const API_KEY = ""; fetch(`https://api.thedogapi.com/v1/images/search?API_KEY=${API_KEY}`) .then((response) => response.json()) .then((json) => { console.log(json); setData([...data,json]); // if json is single object // setData([...data,...json]); // if json is array of one object then you should use this line }); };