title: How do I properly implement the map function with fetch API in React?
body: <p>I'm trying to insert the data fetched into a map function that returns each employe's name in <h1></h1>, but im getting an error that says &quot;data.map is not a function&quot;. How can I fix this&gt;</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from "react";
  
  //const data = [{id:1,employee_name:"Tiger Nixon",employee_salary:320800,employee_age:61,profile_image:""},{id:2,employee_name:"Garrett Winters",employee_salary:170750,employee_age:63,profile_image:""}]
  
  export default function App() {
   const [data, setData] = useState([]);
    useEffect(() =&gt; {
      fetch("https://dummy.restapiexample.com/api/v1/employees")
        .then(response =&gt; response.json())
        .then(result =&gt; setData(result))
    },[]);
    const information = data.map((item,i) =&gt; {
      return (&lt;h1&gt; item.employee_name &lt;/h1&gt;);
  
    })
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt; {information} &lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>