I want the "show" and "hide button to only target 1 image at a time-CodePudding

I've almost completed my small project, which is a react app which calls on a API that displays dog images. However, at the moment, the show and hide buttons are targeting all of the images on the page (12 in total). I simply want to target one image at a time, so when I click hide or show, it will only do so for one of the images.

App.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 >
                    <img alt ="dog photos"  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;

CodePudding user response：

import React, { useState, useEffect } from 'react'


// hide the div then display it with onclick 

const FetchAPI = () => {

    const [show, setShow] = useState({});
    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, id) => (
                <div >
                    <img alt ="dog photos"  src={item.url}></img>
                    {show[id] !== false ? <p>{JSON.stringify(item.breeds)}</p> : null}
                    <button onClick={() => setShow((prev) => ({ ...prev, [id]: true }))}>Show</button>
                    <button onClick={() => setShow((prev) => ({ ...prev, [id]: false }))}>Hide</button>

                </div>
            ))}
        </div>

    )
}

export default FetchAPI;