title: Calling an API With useEffect . when Trying to mapping user it is saying TypeError: Cannot read property 'map' of undefined
body: <pre><code>import logo from './logo.svg';
  import './App.css';
  import { useEffect, useState } from 'react';
  import User from './components/User/User';
  
  function App() {
    const [user, setUser] = useState([]);
    useEffect(() =&gt; {
      // Create an scoped async function in the hook
      async function loadData() {
        const response = await fetch(&quot;https://randomuser.me/api/?results=10&quot;);
        const data = await response.json();
        setUser(data.results);
      }
  
      loadData()
    }, [])
  
    console.log(user)
  
    return (
      
  
      
      &lt;div className=&quot;App&quot;&gt;
        &lt;ul&gt;
            {
  
              user &amp;&amp; user.results.map(usr =&gt; &lt;User user={usr}&gt;&lt;/User&gt;)
            }
        &lt;/ul&gt;
       
        &lt;header className=&quot;App-header&quot;&gt;
          &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
          &lt;p&gt;
            Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
          &lt;/p&gt;
          &lt;a
            className=&quot;App-link&quot;
            href=&quot;https://reactjs.org&quot;
            target=&quot;_blank&quot;
            rel=&quot;noopener noreferrer&quot;
          &gt;
            Learn React
          &lt;/a&gt;
        &lt;/header&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>I am Calling the API with useEffect. Before that I have set a const with useState named user with a default value of empty array. In useEffect I set user value with setUSer(). But when I am mapping user it is giving mean error with a message TypeError: Cannot read property 'map' of undefined ;</p>