title: Unable to map over result of async fetch request in React Hook
body: <p>I've found quite a few issues related to this but I don't seem to be able to find a solution that works and I'm not sure why.</p>
  <p>I have a async fetch request in a react functional component. It returns some dummy JSON data, which I then want to map over.</p>
  <p>Everything is returned correctly in the console.log (and in Postman), however when it comes to mapping the result I get</p>
  <blockquote>
  <p>TypeError: Cannot read property 'map' of undefined</p>
  </blockquote>
  <pre><code>import &quot;./App.css&quot;;
  import React, { useState, useEffect } from &quot;react&quot;;
  
  function App() {
    const [dummyData, setDummyData] = useState([]);
  
    useEffect(() =&gt; {
      fetch(&quot;https://jsonplaceholder.typicode.com/todos/1&quot;)
        .then((res) =&gt; {
          return res.json();
        })
        .then((data) =&gt; {
          setDummyData(data);
        });
    }, []);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        {console.log(dummyData)}
  
        {dummyData.map((d) =&gt; {
          return &lt;h1&gt; {d}&lt;/h1&gt;;
        })}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Can anyone help me understand why? I feel there may be some fundamental gaps in my knowledge on this?? Or am I missing something simple?</p>
  <p>Adding a codesandbox to demo and initialising the state of dummyData</p>
  <p><a href="https://codesandbox.io/s/objective-benz-t1zpi?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/objective-benz-t1zpi?file=/src/App.js</a></p>