javascript - Returning a component from a map function

Question

I want to create a function that maps throw a firestore collection and return a Component for each document in the collection I have tried to use the code below

  <div className="posts">
          
                {
                  db.collection("posts")
                  .get()
                  .then((snapshot) => {
                    snapshot.docs.map((doc)=>(
                      <PostContect img={doc.data().image}   Admin={doc.data().admin} Date={"January 14, 2019"} CommentsNo={"2"} Title={doc.data().title} Body={doc.data().title}  />
                 
                  ))})}
                
</div>

but this error shows:

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.ode

question from:https://stackoverflow.com/questions/65942882/returning-a-component-from-a-map-function

Answer 1

JSX is not the place to make Ajax calls. Instead make the call inside componentDidMount/useEffect and set the data received inside state. As soon as state is updated with received data, React will automatically re-render the component and display the expected content. Try something as follows:

const [snapshots, setSnapshots] = useState();
useEffect(()=> {
    db.collection("posts")
     .get()
     .then((snapshot) => {
      setSnapshots(snapshot.docs)            
     }
    )
}, []);

render
<div className="posts">
    {snapshots && snapshots.map((doc)=>(
      <PostContect img={doc.data().image} Admin={doc.data().admin} Date={"January 14, 2019"} CommentsNo={"2"} Title={doc.data().title} Body={doc.data().title}  />
     )
    }            
</div>