Local storage array being overwritten by new entry useState - React

Question

So I have a pretty simple app where I want to add movies to my list and currently I'm having some trouble saving new entries in this list using local storage.

This is where I'm adding movies to localstorage:

const [myMovies, setMyMovies] = useState([])

useEffect(() =>{
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(myMovies))
  }, [myMovies])

const addMovieToList = (e) =>{
  const movieItem = props.movie;

  setMyMovies(prevMovies =>{
     return [...prevMovies, {id: uuidv4(), movie: {movieItem}, userStats: {rating, status}, date: getCurrentDate}]
  })

 setAddedToList(true)
}

Adding a single movie works fine but whenever I try to add another movie the previous value gets overwritten.

I try to access the movies in another component by getting the item like this:

const [myMovies, setMyMovies] = useState([])

useEffect(() =>{
  const storedMovies = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
  if (storedMovies) setMyMovies(storedMovies)
}, [])

Anyone have a clue what I'm doing wrong? Been at it for a bit but can't really see what I'm doing wrong here :(

Anyways, thanks in advance.

Answer 1

I just fixed this problem. I was resetting the array in the second component before fetching it.. Really stupid mistake but it's been fixed