heres a video of what it is doing: https://youtu.be/NpMVGScqWLI
you see near 25 seconds it works only if i remove from last item added.
for example if i add in this order:
- scary movie 1
- scary movie 2
- scary movie 3
- scary movie 4
is only deleting if i click the remove in this order: 4,3,2,1.
if i click in this order 1, 4, 5, 6 it just mixes up the items order in local storage and does not delete...
// get items from local storage and render on page**
useEffect(() => {
let arrayOfValues = Object.values(localStorage);
console.log("localstoragearray:", arrayOfValues);
if (arrayOfValues.length > 0) {
arrayOfValues.forEach((movie) => {
let storedMovies = JSON.parse(movie);
nominated.push(storedMovies);
setNominated(nominated);
setNominatedCount(nominatedCount + nominated.length);
});
}
}, []);
// remove nominated movies and from local storage**
const removeNomination = (movie) => {
localStorage.removeItem(movie.imdbID);
nominated.splice(
nominated.findIndex((movie) => movie.title),
1
);
setNominated(nominated);
setNominatedCount(nominatedCount - 1);
};
add movies to local storage //add movies to local storage
useEffect(() => {
nominated.forEach((movie) => {
if (nominated.length > 5) {
return;
}
localStorage.setItem(movie.imdbID, JSON.stringify(movie));
});
console.log("nominated:", nominated);
}, [nominated]);
<Button key={index} onClick={()=> { removeNomination(movie); }}>
Remove
</Button>
