0

I am using React, Express and Petfinder API. I am able to successfully save each favourited pet to localStorage and would like to display the list of favourites for that logged in user, on a new page. Here is where I am adding the pet as a favourite

const addFavouritePet = (Pet) => {
    const newFavList = [...favourites, Pet];
    setFavourites(newFavList);
    setFavPet(Pet);

    const user = JSON.parse(localStorage.getItem("userID"));
    const pet = JSON.parse(localStorage.getItem("Favourites"));
    const userId = user.id;

    for (let fav of favourites) {
      Axios.post("http://localhost:3001/api/favourites", {
        pets_id: fav.id,
        users_id: userId,
        shelters_id: fav.organization_id,
        pet_details: pet,
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => console.log(err));
    }
  };

Here's what I've written so far to try and get the list of favorite pets for that user and display it on a new page

export default function Favourites({ id }) {
  axios.get("http://localhost:3001/api/favourites").then((res) => {
    for (let i = 0; i < res.data.length; i++) {
      const petData = res.data.pet_details;
    }
  });
  return (
    <>
      <div>Favourites</div>
    </>
  );
}
Jack
  • 11
  • 1
  • 1
    Typically you'd fetch remote data in a `useEffect` hook and write it into a state variable (via the `useState()` setter). – Phil Jan 24 '22 at 02:15

0 Answers0