Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead? Solve?

Here is my code:

import firebase from "../Firebase.js";

import {ThemeProvider} from "@mui/material";

import Post from "../components/posts/Post";

const firestore = firebase.firestore();

function AllPostsPage(props) {

    const posts = firestore.collection("posts");

    function myFunc() {
        posts.get().then((result) => {
            result.docs.forEach((post) => {
                console.log(post.data().poster);
            })
        })
    }
    
    return (

        <ThemeProvider theme={props.theme}>

            {posts.get().then((result) => {
                result.docs.map((post, index) => {
                    return <Post theme={props.theme} key={index} title={post.data().title} desc={post.data().desc} poster={post.data().poster} imgUrl={post.data().imgUrl} comments={post.data().comments} />
                })
            })}

        </ThemeProvider>

    );

}

export default AllPostsPage;

I tried looking up some other solutions but there were all saying that you should not use async code in react. I am not defining any async code in this page so I am a bit stuck here.

Answer

You should move your async logic out of your return statement. You are getting data from api here and you are using then() here which is asynchronous logic.

You can define a state with useState hook and store the information there, then use state to render your posts. Write your async logic in a function and call it in a useEffect with empty dependency array so it’s called when the component is mounted.

First you import hooks:

import React, { useEffect, useState } from "react";

Then define state in AllPostsPage:

const [postsData, setPostsData] = useState([]);

Then write your async logic in a function and call it in useEffect:

const getPosts = async () => {
   try {
      const response = await posts.get();
      setPostsData(response.data.data);
   } catch(e) { console.log(e);}
}

useEffect(() => {
   getPosts();
}, []}

And finally use your state to render in return statement. Something like this goes between ThemeProvider tags:

{postsData.docs.map((post, index) => (
   <Post theme={props.theme} key={index} title={post.data().title} desc= 
      {post.data().desc} poster={post.data().poster} imgUrl={post.data().imgUrl} 
      comments={post.data().comments} 
   />
)}