Creé una aplicación que se conecta a una API que recupera imágenes de perros. Al cargar la página, se muestran 12 imágenes, junto con texto json, que proporciona información sobre las razas; altura del perro, etc.
Mi paso final sería conectar de alguna manera el botón a (que ya existe) a cada imagen individual, luego recuperar los datos de ese perro/imagen específico después de hacer clic en él, en lugar de que la API obtenga todos los datos a la vez en la carga de la página inicial.
Aplicación.js
import './App.css'; import './Dog.js'; import './index.css'; 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?limit=12&page=10&order=Desc?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 use this line }); }; useEffect(() => { //call data when pagee refreshes/initially loads apiGet(); }, []); return ( <div> {data.map((item) => ( <div class="dog"> <img src={item.url}></img> <button onClick={item.breeds}>Fetch API</button> </div> ))} {data.map((item) => ( <p>{JSON.stringify(item.breeds)}</p> ))} {/*<pre>{JSON.stringify(data, null, 2)}</pre> */} <br /> </div> ) } export default FetchAPI;Cree otra función que obtenga una imagen nueva (única) y la cambie al estado en que hice la función llamada apiGetSingle que cambia los datos en un índice específico. Y si ha realizado la ruta como mencioné en apiGetSingle, que devolverá una sola imagen nueva, entonces funcionará bien, de lo contrario, también se creará una ruta de backend para eso.
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?limit=12&page=10&order=Desc?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 use this line }); }; const apiGetSingle = (index) => { const API_KEY = ""; fetch(`https://api.thedogapi.com/v1/images/search?API_KEY=${API_KEY}`) .then((response) => response.json()) .then((json) => { console.log(json); let d=[...data]; d[index]=json; // if json is single object. d[index]=json[0] // if json returns array setData(d); }; useEffect(() => { }, []); return ( <div> {data.map((item,index) => ( <div class="dog"> <img src={item.url}></img> <button onClick={()=>apiGetSingle(index)}>Fetch API</button> </div> ))} {data.map((item) => ( <p>{JSON.stringify(item.breeds)}</p> ))} <button onClick={apiGet}>Fetch API</button> {/*<pre>{JSON.stringify(data, null, 2)}</pre> */} <br /> </div> ) } export default FetchAPI;