title: How to write a hook to load more button from fetching a json?
body: <p>I am calling my fake api using fetch and getting Json data.
  How can I wire up my load more button so that it it loads more data?</p>
  <p>Everything works, I just need to add functionality to that load button.
  I have an empyt function...</p>
  <p>See code below:</p>
  <pre><code>import React from &quot;react&quot;;
  import { useState, useEffect } from 'react';
  import Grid from &quot;./components/elements/Grid&quot;;
  import PetImage from &quot;./components/elements/PetImage&quot;;
  import LoadMore from &quot;./components/elements/LoadMore&quot;;
  
  const Main = () =&gt; {
  
      //state for img grid
      const [pets, setPets] = useState([]);
    
      //load more pets
      //need to write a condtion allow more pets
      const loadMorePets = () =&gt; {
        ?code?
      };
  
      //fake api call
      useEffect(()=&gt;{
          fetch('./petfinder.json')
            .then((res)=&gt;res.json())
            .then((data)=&gt;{
              // console.log(data); //test
              setPets(data.slice(0, 9))
            });
        },[])
  
    return (
      &lt;div&gt;
        &lt;Grid text=&quot;Find your pet!&quot; &gt;
            {pets.map( (pet, id) =&gt; (
            &lt;PetImage
              key={id} 
              pet={pet}
              petId={pet.id}
              clickable
            /&gt;))}
        &lt;/Grid&gt;
        &lt;LoadMore text=&quot;Load More&quot; onClick={loadMorePets} /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Main;
  ```THANKS!
  </code></pre>