title: Unable to map through and render data in JSX
body: <p>This is related to my previous question <a href="https://stackoverflow.com/questions/67519100/react-hooks-cannot-read-property-map-of-undefined">Incase, anyone wishes to refer to it</a></p>
  <p>So, I have a <code>movieList</code> component</p>
  <pre><code>    function MovieList() {
        const [pageOneData, setPageOneData] = useState({});
      
        useEffect(async () =&gt; {
          await movieListApi.PageOneApi(
            (res) =&gt; {
              const pageOneData = res.data.page;
              setPageOneData(pageOneData);
              console.log(&quot;page one data: &quot;, pageOneData);
            },
            (err) =&gt; {
              console.log(err);
            }
          );
        }, []);
      
        const movieList = pageOneData.contentItems || [];
        console.log(movieList);
      
        return (
      &lt;div&gt;
        &lt;h4 className=&quot;text-white p-5&quot;&gt;{pageOneData.title}&lt;/h4&gt;
        &lt;div className=&quot;grid grid-flow-row grid-cols-3 grid-rows-3 gap-7&quot;&gt;
          &lt;div&gt;
            &lt;img src=&quot;./assests/poster1.jpg&quot; /&gt;
            {movieList.map((movie, key) =&gt; {
              console.log(&quot;movie&quot;, movie);
              console.log(&quot;movie name&quot;, movie.name);
              console.log(&quot;movie posterImage&quot;, movie.posterImage);
              const { name } = movie;
              console.log(&quot;name&quot;, name);
              &lt;p className=&quot;text-white&quot;&gt;{name}&lt;/p&gt;;
            })}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
      }
  </code></pre>
  <p>For some reason, I am unable to print(interpolate) data inside render. Although, that data does show up in <code>logs</code> though. It's probably something small and silly, just can't figure it out.</p>