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>
</>
);
}