Casi he completado mi pequeño proyecto, que es una aplicación de reacción que recurre a una API que muestra imágenes de perros. Sin embargo, por el momento, los botones para mostrar y ocultar están dirigidos a todas las imágenes de la página (12 en total). Simplemente quiero apuntar a una imagen a la vez, de modo que cuando haga clic en ocultar o mostrar, solo lo haga para una de las imágenes.

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' // hide the div then display it with onclick const FetchAPI = () => { const [show, setShow] = useState(false); 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]); }); }; useEffect(() => { //call data when pagee refreshes/initially loads apiGet(); }, []); return ( <div> {data.map((item) => ( <div class="dog"> <img alt ="dog photos" class="flexMate" src={item.url}></img> {show ? <p>{JSON.stringify(item.breeds)}</p> : null} <button onClick={() => setShow(true)}>Show</button> <button onClick={() => setShow(false)}>Hide</button> </div> ))} </div> ) } export default FetchAPI;