title: Ajax call for each item in a map function
body: <p>I have the following scenario where I need to make an ajax request to an endpoint for each item in the array while i map over it and display it on screen.</p>
  
  <pre><code>const items = [
      {
          id: 1,
          name: "test"
      },
      {
          id: 2,
          name: "test2"
      }
  ]
  </code></pre>
  
  <p>In my render() method:</p>
  
  <p>render() {</p>
  
  <pre><code>    return (
          items.map((item) =&gt; {
              &lt;div&gt;{item.name}&lt;/div&gt;
  
              // function that returns a promise
              // the endpoint requires the item's id
              this.apiCall(item.id).then((returnedValue) =&gt; {
                  return &lt;div&gt;{returnedValue}&lt;/div&gt;
              });
          })
      );
  }
  </code></pre>
  
  <p>But running it throws this error:</p>
  
  <p><code>Uncaught (in promise) Error: Minified React error #31; Objects are not valid as a React child (found: [object Promise]).</code></p>