-1

Link to the TypeError Screenshot

The App was working fine yesterday. I deleted the project and cloned from Github.com. Still it won't work. Here's the link to the code: Link to the Github Project

import React from 'react';

function SearchMovies(props) {
  const FavoriteComponent = props.favoriteComponent;
  return (
    <>
      {props.movies.map((movie, index) => (
        <div>
          s<img src={movie.Poster} alt='movie'></img>
          <div onClick={() => props.handleFavoritesClick(movie)}>
            <FavoriteComponent />
          </div>
        </div>
      ))}
    </>
  );
}

export default SearchMovies;
spreet
  • 23
  • 4

1 Answers1

1

In your SearchMovies component try using null propagation to avoid that error.

{props.movies?.map((movie, index) => (...

import React from 'react';

function SearchMovies(props) {
  const FavoriteComponent = props.favoriteComponent;
  return (
    <>
      {props.movies?.map((movie, index) => (
        <div>
          s<img src={movie.Poster} alt='movie'></img>
          <div onClick={() => props.handleFavoritesClick(movie)}>
            <FavoriteComponent />
          </div>
        </div>
      ))}
    </>
  );
}

export default SearchMovies;

Working App after correction: Stackblitz

Ketan Ramteke
  • 10,183
  • 2
  • 21
  • 41
  • You are welcome. I also fixed the bug with the localStorage in the second useEffect hook which was causing ```favorites not an iterable``` error. now everything is working as It should. Happy coding. – Ketan Ramteke Dec 29 '20 at 22:29