title: how to get value from a fulfilled promise in react
body: <p>I have an API that return my expected results in a react project.</p>
  <p>I wrote this function to call API and get the results:</p>
  <pre><code>async function getUsers() {
    const token = store.getState().token;
    const data = { token };
    await MyApi.getUsers(data)
      .then((result) =&gt; {
        console.log(result);
        return result;
      })
      .catch((error) =&gt; {
        console.log(error);
        return null;
      });
  }
  
  const userList = getUsers();
  </code></pre>
  <p>When I console.log the <code>result</code> in the <code>then</code> section of the function, it printed the expected list of users (that is a json array).
  But when I console.log the <code>userList</code> it is a <code>promise</code> like bellow image:</p>
  <p><a href="https://i.stack.imgur.com/nsweA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nsweA.png" alt="enter image description here" /></a></p>
  <p>that means the returned value of <code>getUsers</code> function is a <code>Promise</code>.</p>
  <p>1- How can I get the results from this promise?</p>
  <p>2- why the <code>PromiseResult</code> is <code>undefined</code> while the <code>result</code> in <code>then</code> section is a json array?</p>
  <p>** these codes are not in the react component</p>
  <p>the expected <code>result</code> is:</p>
  <pre><code>[
   {
    id: 1,
    name: &quot;user1&quot;,
    role: &quot;student&quot;
   },
  {
    id: 2,
    name: &quot;user2&quot;,
    role: &quot;student&quot;
   },
  {
    id: 3,
    name: &quot;user3&quot;,
    role: &quot;student&quot;
   },
  ]
  </code></pre>
  <p>and I want to use <code>userList</code> array to create <code>user card</code>:</p>
  <pre><code>&lt;div&gt;
  {userList ? (
   userList.map((user) =&gt;
   {
    &lt;Card&gt;
      &lt;h1&gt; user.name &lt;/h1&gt;
    &lt;/Card&gt;
   }
  ):
  (&lt;h1&gt;user list is empty &lt;/h1&gt;)
  }
  </code></pre>