title: How do I target each image seperately, and fetch API data from them, instead of collect it all at once
body: <p>I've created an app that connects to an API that retrieves dog images. On page load, 12 images are displayed, along with json text, that provides information about the breeds; height of the dog etc.</p>
  <p>My final step would be somehow connecting the a button (which already exists) to each individual image, then retrieving data for that one specific dog/image after clicking it, instead of the API fetching all of the data at once on initial page load.</p>
  <p>App.js</p>
  <pre><code>import './App.css';
  import './Dog.js';
  import './index.css';
  import FetchAPI from './FetchAPI';
  
  
  
  
  function DogApp() {
  
    return (
      
      &lt;div className=&quot;dogApp&quot;&gt;
       &lt;FetchAPI /&gt;   
      &lt;/div&gt;
    );
  }
  
  export default DogApp;
  </code></pre>
  <p>FetchAPI.js</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  
  
  const FetchAPI = () =&gt; {
  
      const [data, setData] = useState([]);
      const apiGet = () =&gt; {
          const API_KEY = &quot;&quot;;
          fetch(`https://api.thedogapi.com/v1/images/search?limit=12&amp;page=10&amp;order=Desc?API_KEY=${API_KEY}`)
              .then((response) =&gt; response.json())
              .then((json) =&gt; {
                  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(() =&gt; {           //call data when pagee refreshes/initially loads 
          apiGet();
      }, []);
  
      return (
          &lt;div&gt;
              {data.map((item) =&gt; (
                  &lt;div class=&quot;dog&quot;&gt;
                      &lt;img src={item.url}&gt;&lt;/img&gt;
                      &lt;button onClick={item.breeds}&gt;Fetch API&lt;/button&gt;
                  &lt;/div&gt;
              ))}
              {data.map((item) =&gt; (
                  &lt;p&gt;{JSON.stringify(item.breeds)}&lt;/p&gt;
              ))}
  
  
              {/*&lt;pre&gt;{JSON.stringify(data, null, 2)}&lt;/pre&gt; */}
              &lt;br /&gt;
  
  
          &lt;/div&gt;
  
      )
  }
  
  export default FetchAPI;
  </code></pre>