Objects are not valid as a React child (found: [object Promise])

Question

I am trying to render a list of posts by mapping through an array. I\'ve done this many times before but for some

renderPosts = async () => {
    try {
          


        

Answer 1

this.renderPosts() will return a Promise not the actual data, and AFAIK Reactjs will not resolve Promises implicitly in render.

You need to do it like this

componentDidMount() {
  this.renderPosts();
}

renderPosts = async() => {
  try {
    let res = await axios.get('/posts');
    let posts = res.data;
    // this will re render the view with new data
    this.setState({
      Posts: posts.map((post, i) => (
        <li key={i} className="list-group-item">{post.text}</li>
      ))
    });
  } catch (err) {
    console.log(err);
  }
}

render() {
  return (
    <div>
      <ul className="list-group list-group-flush">
        {this.state.Posts}
      </ul>
    </div>
  );
}

Answer 2

I also received the same error message when creating an async functional component. Functional components should not be async.

const HelloApp = async (props) =>  { //<<== removing async here fixed the issue
  return (
    <div>
      <h2>Hello World</h2>
    </div>
  )
}
ReactDOM.render(<HelloApp />, document.querySelector("#app"))

jsfiddle