title: Uncaught TypeError: Cannot read properties of undefined (reading 'poster_path')
body: <p>I have this async function that is fetching data from the API but when I use the data it gets a type error of undefined with movies array. But then I use &quot;&amp;&amp;&quot; to tell it that if it's empty then don't execute the block but it still gives the error. I have done it by the ternary operator too but still the same.</p>
  <p>Here is the use effect hook which is fetching data from API</p>
  <pre><code>const [movies, setMovies] = useState([])
  useEffect(() =&gt; {
  
     async function fetchData() {
  
       const request = await axios.get(fetchUrl);
       setMovies(request.data.results);
       console.log(movies);
       return request;
     }
  
     fetchData();
  }, [fetchUrl]);
  </code></pre>
  <p>And here is the code for that element</p>
  <pre><code>{movies &amp;&amp;
      &lt;div id=&quot;film-row&quot;&gt;
        &lt;FilmCard img={`${base_url}${movies[0].poster_path}`} /&gt;
        &lt;FilmCard img={`${base_url}${movies[1].poster_path}`} /&gt;
        &lt;FilmCard img={`${base_url}${movies[2].poster_path}`} /&gt;
        &lt;FilmCard img={`${base_url}${movies[3].poster_path}`} /&gt;
        &lt;FilmCard img={`${base_url}${movies[4].poster_path}`} /&gt;
        &lt;FilmCard img={`${base_url}${movies[5].poster_path}`} /&gt;
      &lt;/div&gt;
  }
  </code></pre>