title: How to render async content on React?
body: <p>I'm building a SPA based on WP API and want to render both posts and their featured images but they come in separate endpoints.</p>
  
  <p>When rendering, React don't wait the request to resolve and get the error: "Uncaught Invariant Violation: Objects are not valid as a React child (found: [object Promise])."</p>
  
  <p>Totally a beginner about Promise and Async/Await functions. Don't even know if I'm using it correctly.</p>
  
  <pre><code>import React, { Suspense, Component } from "react";
  import { FontSizes, FontWeights, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
  import axios from "axios";
  import './Home.styl'
  
  class Home extends Component {
      constructor() {
        super();
  
        this.state = {
          posts: []
        }
      }
  
      componentWillMount() {
  
        this.renderPosts();
  
      }
  
      renderPosts() {
  
        axios.get('https://cors-anywhere.herokuapp.com/https://sextou.didiraja.net/wp-json/wp/v2/posts')
        .then((response) =&gt; {
          // console.log(response)
  
          this.setState({
            posts: response.data,
          })
        })
        .catch((error) =&gt; console.log(error))
  
      }
  
      async getImg(mediaId) {
  
        const getImg = axios
          .get('https://cors-anywhere.herokuapp.com/https://sextou.didiraja.net/wp-json/wp/v2/media/17')
          .then((response) =&gt; {
            return {
              url: response.data.source_url,
              alt: response.data.alt_text,
            }
          })
  
        const obj = getImg
  
        return (
          &lt;img src={obj.url} /&gt;
        )
  
      }
  
      render() {
  
        const { posts } = this.state
  
        return (
          &lt;span className="Home-route"&gt;
  
          &lt;h1 style={{textAlign: 'center'}}&gt;Sextou!&lt;/h1&gt;
  
            &lt;div className="events-wrapper"&gt;
              {
                posts.map((post, key) =&gt; {
                  return (
                  &lt;div className="event-card" key={key}&gt;
  
                    &lt;img src={this.getImg()} /&gt;
  
                    &lt;h2
                      className="event-title"
                      style={{ fontSize: FontSizes.size42, fontWeight: FontWeights.semibold }}
                    &gt;
                      {post.title.rendered}
                    &lt;/h2&gt;
  
                    {post.acf.event_date}
  
                    &lt;span&gt;{post.excerpt.rendered}&lt;/span&gt;
  
                    &lt;a href={post.acf.event_link} target="_blank"&gt;
                      &lt;DefaultButton
                        text="Acesse o evento"
                      /&gt; 
                    &lt;/a&gt;
  
                    &lt;a href={post.acf.event_ticket} target="_blank"&gt;
                      &lt;PrimaryButton
                        text="Comprar ingressos"
                      /&gt; 
                    &lt;/a&gt;
  
                  &lt;/div&gt;
  
                  )
                })
              } 
            &lt;/div&gt;
  
  
          &lt;/span&gt;
        );
      }
    }
    export default Home;
  </code></pre>