title: Error in Map function: Cannot read property of 'map' undefined
body: <p><a href="https://i.stack.imgur.com/MrQNr.png" rel="nofollow noreferrer">Error in Map function: Cannot read property of 'map' undefined</a></p>
  <p>While using the map function, I went through each documentation but and also copied the same exact code whjich was actual running on the github but was unable to run in the local server. It's always saying the same and same problem everytime as the map function is underdefined.</p>
  <p>Please get the following code which I used in my project.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import axios from &quot;./axios&quot;;
  import &quot;./Row.css&quot;;
  import Youtube from &quot;react-youtube&quot;;
  
  const baseImgUrl = &quot;https://image.tmdb.org/t/p/original&quot;;
  
  function Row({ title, fetchUrl, isLargeRow }) {
    const [movies, setMovies] = useState([]);
    const [trailerUrl, setTrailerUrl] = useState(&quot;&quot;);
  
    // Options for react-youtube
    const opts = {
      height: &quot;390&quot;,
      width: &quot;100%&quot;,
      playerVars: {
        autoplay: 1,
      },
    };
  
    useEffect(() =&gt; {
      async function fetchData() {
        const request = await axios.get(fetchUrl);
        setMovies(request.data.results);
        return request;
      }
      fetchData();
    }, [fetchUrl]);
  
    const handleClick = async (movie) =&gt; {
      if (trailerUrl) {
        setTrailerUrl(&quot;&quot;);
      } else {
        let trailerurl = await axios.get(
          `/movie/${movie.id}/videos?api_key=somekeyhere`
        );
        setTrailerUrl(trailerurl.data.results[0]?.key);
      }
    };
  
    return (
      &lt;div className=&quot;row&quot;&gt;
        &lt;h2&gt;{title}&lt;/h2&gt;
  
        &lt;div className=&quot;row_posters&quot;&gt;
          {movies.map(
            (movie) =&gt;
              movie.backdrop_path !== null &amp;&amp; (
                &lt;img
                  className={`row_poster ${isLargeRow &amp;&amp; &quot;row_posterLarge&quot;}`}
                  src={`${baseImgUrl}${
                    isLargeRow ? movie.poster_path : movie.backdrop_path
                  }`}
                  alt={movie.name}
                  key={movie.id}
                  onClick={() =&gt; handleClick(movie)}
                /&gt;
              )
          )}
        &lt;/div&gt;
        {trailerUrl &amp;&amp; &lt;Youtube videoId={trailerUrl} opts={opts} /&gt;}
      &lt;/div&gt;
    );
  }
  
  export default Row
  
  </code></pre>