[React.js] Uncaught TypeError: Cannot read properties of undefined (reading 'map')

---

About Error

When I execute this react code,

<div id={id} className="row__posters">
  {movies.length > 0 ? (
    movies.map((movie) => {
      return (
        <SwiperSlide>
          <img
            key={movie.id}
            style={{ padding: "25px 0" }}
            className={`row__poster ${
            isLargeRow && "row__posterLarge"
            }`}
            src={`https://image.tmdb.org/t/p/original/${
            isLargeRow ? movie.poster_path : movie.backdrop_path
            }`}
            alt={movie.name || movie.title}
             onClick={() => handleClick(movie)}
          />
        </SwiperSlide>
      );
    })
  ) : (
    <p>No movies available.</p>
  )}
</div>

It results in TypeError.

---

Why?

It is because react.js is going to map through the movies when movies do not have any elements. In other words, movies is currently undefined.

---

Solution

1. Initializing

   movies is undefined because the array might not be initialized. You can initialize it by using useState in react.

const [movies, setMovies] = useState([]); // initialize movies to []

2. Optional chaining (?.)

   if movies is nullish (meaning null or undefined), the expression short circuits and evaluates to undefined instead of throwing an error.

    movies?.map((movie) => {
        // your code    
    }
   

3. Logical AND (&&)

   Logical AND (&&) works similar to optional chaining (?.). Before mapping, we can check if movies is undefined by using && operator.

movies && movies.map((movie) => {
    // your code    
}