title: TypeError: movies is undefined using React Hooks
body: <p>I am importing data from an API into an array using React hooks and I am getting the error TypeError: movies is undefined.</p>
  <p>Here is my full code:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect , useState } from 'react';
  import axios from './axios';
  import &quot;./Row.css&quot;;
  
  function Row({ title, fetchUrl, isLargeRow = false}) {
      const [movies, setMovies] = useState([]);
      const base_url = &quot;https://image.tmdb.org/t/p/original/&quot;;
  
      useEffect(() =&gt; {
          async function fetchData(){
              const request = await axios.get(fetchUrl);
              setMovies(request.data.results);
              return request;
          }
  
          fetchData();
      }, [fetchUrl]);
  
      console.log(movies);
  
      return (
          &lt;div className=&quot;row&quot;&gt;
          &lt;h2&gt;{title}&lt;/h2&gt;
  
          {movies.map(movie =&gt; (
              &lt;img src={`${base_url}${
                 isLargeRow ? movie.poster_path : movie.backdrop_path 
              }`}
              alt={movie.name}
              /&gt;
  
          ))}
          &lt;/div&gt;
      );
  }
  
  export default Row;
  </code></pre>
  
  <p>When I do console.log(movies); , I seem to get a few empty arrays before it shows some arrays with data. I wonder if the error is because there are no values in the first few arrays.</p>
  <p><a href="https://i.stack.imgur.com/aZK1T.png" rel="nofollow noreferrer">Image showing arrays in the console</a></p>
  <p><a href="https://i.stack.imgur.com/RRDZD.png" rel="nofollow noreferrer">The error itself</a></p>