setState asynchronous array react native

Question

I am trying to set an array of messages once I have loaded all necessary data from firestore, but it seems I have one too many await/asyncs in there as the output results in

[{"_A": null, "_x": 0, "_y": 0, "_z": null},....]

function loadMessages() {

    const newMessageArray = chatIds.map(async chat => {

      const q = query(collection(db, collections.messages),
        where('chatId', '==', chat.id),
        orderBy("createdAt", 'desc'),
        limit(1)
      );

      return await getDocs(q).then(async querySnapshot => (querySnapshot.docs[0].data()));
    });
    console.log(newMessageArray)
    setMessages(newMessageArray);
  }

How can I fix it in a way that leaves me with a single new array for setMessages?

Answer 1

The problem is because you're returning a Promise in your return of the .map. You need to solve them.

This link will help you. You'll need to use the Promise.all to solve them.