Unable to receive data returned by a function

Question

I am working on a React project. I have two files contact.js and functions.js .

In contact.js file

import {getUserContacts} from './functions.js';

 useEffect(() => {
    let temp=getUserContacts();
    console.log(temp);
  }, [])

In functions.js file

export const getUserContacts = () => {
  const contactDetailsArr = [];

  db.collection("users").doc(userId).get()
    .then(docs => {

      const contactsObject = docs.data().contacts;

      for (let contact in contactsObject) {

        db.collection("users").doc(contact).get()
          .then(userDetail => {
            contactDetailsArr.push({
              userId: contact,
              lastMessage: contactsObject[contact].lastMsg,
              time: contactsObject[contact].lastMsgTime,
              email: userDetail.data().emailId,
              active: userDetail.data().active,
              img: userDetail.data().imageUrl
            })

          })
      }
      
      return contactDetailsArr;

    })
    .catch(err => {
      console.log(err);
    })

}

As one can see in the functions.js when I console contactDetails I am able to see the data. But in contact.js when I console the returned data I get undefined .

My above problem got resolved but I am curious to know how we will be able to extract data when onSnapshot is returned.

for example: if functions.js is changed into

export const getUserContacts = () => {
  const contactDetailsArr = [];

  return db.collection("users").doc(userId)
    .onSnapshot(docs => {

      const contactsObject = docs.data().contacts;

      for (let contact in contactsObject) {

        db.collection("users").doc(contact).get()
          .then(userDetail => {
            contactDetailsArr.push({
              userId: contact,
              lastMessage: contactsObject[contact].lastMsg,
              time: contactsObject[contact].lastMsgTime,
              email: userDetail.data().emailId,
              active: userDetail.data().active,
              img: userDetail.data().imageUrl
            })

          })
      }
      
      return contactDetailsArr;

    })
    

}

Now how do we extract data in contact.js ?

Answer 1

Your logic of getUserContacts() does not return anything that's why you get undefined . Try to add return as below.

export const getUserContacts = () => {
  const contactDetailsArr = [];
  return db.collection("users").doc(userId).get()
    .then(docs => {
      const contactsObject = docs.data().contacts;
      for (let contact in contactsObject) {
        db.collection("users").doc(contact).get()
          .then(userDetail => {
            contactDetailsArr.push({
              ...
            })
          })
      }
      return contactDetailsArr;
    })
    .catch(err => {
      console.log(err);
    })
}

Answer 2

You are not returning any data. What you should to HuyPham did since it returns a promise. From there, you can do temp.then(res => console.log(rrs))

Answer 3

You might have this result if there's a delay in your function logic

Answer 4

I hope your

//function logic

done have any async stuff, otherwise

contactDetails

would be undefined at the time you call

getUserContacts