title: React: async and await not working with fetch
body: <p>I have API on Node server returning JSON like this when called:</p>
  <pre><code>{&quot;result&quot;:[{&quot;ProductID&quot;:1,&quot;ProductName&quot;:&quot;iPhone10&quot;,&quot;ProductDescription&quot;:&quot;Latest smartphone from Apple&quot;,&quot;ProductQuantity&quot;:100}]}
  </code></pre>
  <p>I'm trying to display all of that information to user using fetch API with React but no matter what my call returns <code>undefined</code>. Here is my React code:</p>
  <pre><code>const [products, setProducts] = useState({})
  
  async function getProducts() {
      await fetch(`http://127.0.0.1:5000/listProducts`)
      .then(response =&gt; response.json())
      .then(response=&gt;{
        setProducts({products:response.result})
        console.log(response.result);
        products.map(products =&gt;
          &lt;h1&gt;{products.ProductName}&lt;/h1&gt;
          &lt;h1&gt;{products.ProductDescription}&lt;/h1&gt;
          )
      })
      .catch(err=&gt;console.error(err))
    }
  </code></pre>
  <p>Function getProducts() is called once when page is loaded. What I'm doing wrong? Thanks in advance.</p>