title: React - issue with useEffect() and axios.get
body: <p>I am struggling to understand why my code is not working. I am using the useEffect() hook to make a call to an API, and then I am using setState() to update my component state. In my JSX, I am mapping my info array to render the data.</p>
  <p>Here's my code:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import axios from 'axios';
  import './App.css';
  
  function App() {
      const [info, setInfo] = useState();
      console.log(info);
  
      useEffect(() =&gt; {
          const getUsers = async () =&gt; {
              const res = await axios('https://api.mocki.io/v1/b043df5a');
              console.log(res.data);
              setInfo(res.data);
          };
  
          getUsers();
      }, []);
  
      return (
          &lt;div&gt;
              &lt;input type='text' placeholder='Search users' /&gt;
              &lt;input type='text' placeholder='Search users' /&gt;
  
              {info.map((el, index) =&gt; {
                  console.log(el);
                  return &lt;h1 key={index}&gt;{el.city}&lt;/h1&gt;;
              })}
          &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>However, I get this error: 'TypeError: Cannot read property 'map' of undefined'. My best guess is that my JSX is rendered before my state is populated with API info.</p>
  <p>The code does work when I write the following JSX, which allows me to check if 'info' is true:</p>
  <pre><code>{info &amp;&amp; info.map((el, index) =&gt; {
    console.log(el);
    return &lt;h1 key={index}&gt;{el.city}&lt;/h1&gt;;
  })}
  </code></pre>
  <p>Is this a normal behavior? Why is useEffect not populating my state before my page is rendered?</p>
  <p>I would appreciate your help, as I am struggling to find the solution to this specific issue.</p>
  <p>Thanks!</p>