How can I load more json content on my button?React Hooks Help

JavaScript
#1

I have fake json data, that I am calling with fetch, and I want to load more data, when I click the button… I can’t seem to figure it out…

I sliced it at 9, but I want to load anothner 9…

Here is my code:

const Main = () => {

    //state for img grid
    const [pets, setPets] = useState([]);


    //load more pets
    //need to write a condtion allow more pets
    const loadMorePets = () => {

      };


    //fake api call
    useEffect(()=>{
        fetch('./petfinder.json')
          .then((res)=>res.json())
          .then((data)=>{
            // console.log(data); //test
            setPets(data.slice(0, 9))
          });
      },[])

  return (
    <div>
      <Grid text="Find your pet!" >
          {pets.map( (pet, id) => (
          <PetImage
            key={id} 
            pet={pet}
            petId={pet.id}
            clickable
          />))}
      </Grid>
      <LoadMore text="Load More" onClick={loadMorePets} />
    </div>
  );
};

export default Main;
#2

Let [visible, setVisible] = useState(9);

Addpethandler () {

Setvisible(prevValue => prevValue + 9)

}

Pets.slice(0,visible).map()

Sorry im on my phone but you will get it i hope

#3

thanks, but I still dont get it… : /