title: Can't map an object, fetching an api returns first undefined then the object
body: <p>I'am fetching an api, but i can't map it because while console.log the object first i get undefined as response then i get the object.
  This leads to this error <code>Uncaught TypeError: Cannot read property 'map' of undefined</code>.
  I don't know why this happens, i search for it but could't find the solution.</p>
  
  <p><a href="https://i.stack.imgur.com/TfCau.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TfCau.png" alt="enter image description here"></a></p>
  
  <p>My code:</p>
  
  <pre><code>const [UsersRow, setUsersRow] = React.useState()
    React.useEffect(() =&gt; {
      fetch("api/machine", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + window.localStorage.getItem("access_token"),
        },
      })
        .then(resp =&gt; {
          return resp.json();
        })
        .then(data1 =&gt; {
          setUsersRow(data1);
        })
        .catch(error =&gt; {
  
          window.localStorage.removeItem("access_token");
          window.location.replace("/");
        })
  
    }, []);
  
  {console.log(UsersRow)}
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;h1&gt;Azure machines&lt;/h1&gt;
        &lt;Table className={classes.table} size="small"&gt;
          &lt;TableHead&gt;
            &lt;TableRow&gt;
              &lt;TableCell align="left"&gt;name&lt;/TableCell&gt;
              &lt;TableCell align="left"&gt;resource_group&lt;/TableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
          &lt;TableBody&gt;
            {UsersRow.map(row =&gt; (
              &lt;TableRow key={row.name + row.resource_group}&gt;
                &lt;TableCell align="left" component="th" scope="row"&gt;
                  &lt;StyledButton size = "small" className={style.size3}&gt;
                       &lt;Link  style={{ color: 'inherit', textDecoration: 'inherit'}} to={`/machines/${row.resource_group + "/" + row.name}`}&gt;{row.name}&lt;/Link&gt;
                    &lt;/StyledButton&gt;
                &lt;/TableCell&gt;
                &lt;TableCell align="left"&gt;{row.resource_group}&lt;/TableCell&gt;
              &lt;/TableRow&gt;
              ))}
          &lt;/TableBody&gt;
        &lt;/Table&gt;
      &lt;/div&gt;
    )
  }
  
  </code></pre>