title: TypeError: .map is not a function - React application
body: <p>I created this React application to practice the fetch API.
  However, while writing the code to display the data on the browser via the map method, I got the error message &quot;TypeError: profile.map is not a function&quot;. Below is the code:</p>
  <pre><code>import React, { Fragment, useEffect, useState } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  
  function App() {
    // https://reqres.in/api/users
    const [profile, setProfile] = useState([]);
    const [loading, setLoading] = useState(false);
  
    const getProfile = async () =&gt; {
      setLoading(true);
      const response = await fetch(&quot;https://reqres.in/api/users&quot;);
      const data = await response.json();
      setProfile(data);
      setLoading(false);
    };
  
    useEffect(() =&gt; {
      getProfile();
    }, []);
  
    return (
      &lt;Fragment&gt;
        &lt;h1&gt;React fetch&lt;/h1&gt;
        &lt;div className=&quot;main&quot;&gt;
          &lt;section className=&quot;section&quot;&gt;
            &lt;h2&gt;Get database&lt;/h2&gt;
            &lt;div&gt;
              {loading ? (
                &lt;Fragment&gt;loading..&lt;/Fragment&gt;
              ) : (
                profile.map(i =&gt; {
                  &lt;Fragment&gt;
                    &lt;ul&gt;
                      &lt;li&gt;{i.id}&lt;/li&gt;
                      &lt;li&gt;{i.email}&lt;/li&gt;
                      &lt;li&gt;{i.first_name}&lt;/li&gt;
                      &lt;li&gt;{i.last_name}&lt;/li&gt;
                      &lt;li&gt;
                        &lt;image src={i.avatar} /&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/Fragment&gt;;
                })
              )}
            &lt;/div&gt;
          &lt;/section&gt;
          &lt;form className=&quot;section&quot;&gt;
            &lt;h2&gt;Post data&lt;/h2&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;enter detail&quot; /&gt;
            &lt;button type=&quot;submit&quot;&gt;Post&lt;/button&gt;
          &lt;/form&gt;
          &lt;form className=&quot;section&quot;&gt;
            &lt;h2&gt;Update data&lt;/h2&gt;
            &lt;select&gt;
              &lt;option&gt;Choose data&lt;/option&gt;
            &lt;/select&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;enter detail&quot; /&gt;
            &lt;button type=&quot;submit&quot;&gt;Update&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/Fragment&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Why isn't map being recognized?</p>