How to access values of a Promise?

Question

I'm writing a comment system built with two databases: one contains the text and the ID of the commenter, which then is used to access the second database to retrieve & dynamically display the poster's profile information (pfp and display name) for each comment they've submitted.

The function inside the useEffect() hook returns an array of Promises. I've been trying to figure out ways to access values inside these Promises but so far to no avail. I know that .then() exists specifically for this purpose but I don't understand how and where to apply it properly in this case.

import React, { useEffect, useState, Fragment } from 'react'
import firebase from './firebase'

export const Comments = () => {

    const [cred, setCred] = useState('')
    const [comment, setComment] = useState('')
    const [allComments, setAllComments] = useState(null)

    useEffect(() => {

// grab the database containing poster ID 
// & text of each single comment by it's name and then map over it

        firebase.getData('text&ID').onSnapshot(snapshot => setAllComments([...snapshot.docs.map(async (doc) => {

// using the poster ID, 
// access the 'users' DB that contains the avatar & name fields

            let comment = doc.data().content
            let poster = await firebase.getData('users').doc(doc.data().posterID).get()
            let name = poster.data().name
            let avatar = poster.data().avatar

// returning an object of all the data we want to display for each comment

            return ({
                name: name,
                avatar: avatar,
                comment: comment
            })
        })]))

// if user exists, set state to their credentials

        firebase.isInitialized().then(val => setCred(val))       
    }, [])

    return allComments && <Fragment>

// submit the comment to the text&DB collection with text, poster ID and text 

        {cred && <form onSubmit={(e) => {
            e.preventDefault()
            firebase.addComment('text&ID', cred.uid, comment).then(console.log('comment sent!')).then(setComment(''))
        }}>
            <input
                type="text"
                value={comment}
                name="text"
                placeholder="comment..."
                onChange={e => { setComment(e.target.value) }}
                required
            />
            <br />
            <button >Post</button>
        </form>}
        <ul>

// the plan was to map over allComments 
// and return an <li> with all the display info
// but logging to console displays THE array of Promises
// that I want to access

            {console.log(allComments)}
        </ul>
    </Fragment>
}

Any and all input is highly welcome.

Here's the console.log output:

[Promise]
   0: Promise
      __proto__: Promise
         [[PromiseStatus]]: "resolved"
         [[PromiseValue]]: Object
            avatar: "https://i.imgur.com/v4ImnVE.jpg"
            comment: "no halo"
            name: "polnareff"
         __proto__: Object
      length: 1
      __proto__: Array(0)

Answer 1

Moved from comments to answer as it proved to answer the question.

I suggest looking at promise.all()

It basically takes in a array of promises.

Promise.all([Promise1, Promise2, Promise3]) .then(result) => { console.log(result) }) .catch(error => console.log(Error in promises ${error}))

it might be what you are looking for.

If this gives you the correct output just replace the console.log with result.map(item => {<li>{item.comment}</li>}) etc.

Answer 2

async function represents an asynchronous function and actually returns a Promise in order to be notified when all the code inside the function has been executed.

So in you code [...snapshot.docs.map(async ...)] will return an array of Promise. By the way, you don't need to use the destructuring operator ..., you could directly use snapshot.docs.map which will return a new array.

You can use Promise.all to wait until the resolution of all the promises, then update your state variable allComments.

Here is the code of your effect:

useEffect(() => {

  firebase.getData('text&ID').onSnapshot(snapshot => {
    const commentPromises = snapshot.docs.map(async (doc) => {
      const {posterId} = doc.data();
      const poster = await firebase.getData('users').doc(posterID).get();
      const {avatar, name, content: comment} = poster.data()

      return {name, avatar, comment};
    });

    Promise.all(commentPromises)
      .then(setAllComments)
      .catch(...);
  });

  firebase.isInitialized()
    .then(val => setCred(val))
    .catch(...);
});