title: How to extract data when onSnapshot is returned in realtime firestore?
body: <p>I have two files <code>contact.js</code> and <code>functions.js</code>. I am using firestore realtime functionality.</p>
  <p>Here is my functions.js file code:</p>
  <pre><code>export const getUserContacts = () =&gt; {
    const contactDetailsArr = [];
  
    return db.collection(&quot;users&quot;).doc(userId)
      .onSnapshot(docs =&gt; {
  
        const contactsObject = docs.data().contacts;
  
        for (let contact in contactsObject) {
  
          db.collection(&quot;users&quot;).doc(contact).get()
            .then(userDetail =&gt; {
              contactDetailsArr.push({
                userId: contact,
                lastMessage: contactsObject[contact].lastMsg,
                time: contactsObject[contact].lastMsgTime,
                userName:userDetail.data().userName,
                email: userDetail.data().emailId,
                active: userDetail.data().active,
                img: userDetail.data().imageUrl,
                unreadMsg:contactsObject[contact].unreadMsg
              })
  
            })
        }
        console.log(contactDetailsArr);
        return contactDetailsArr;
  
      })
  }
  </code></pre>
  <p>in <code>contact.js</code> when I do:</p>
  <pre><code>useEffect(() =&gt; {
      let temp = getUserContacts();
      console.log(temp);
  }, [])
  </code></pre>
  <p>I want to extract data of <code>contactDetailsArr</code> in <code>contacts.js</code> but I get the value of temp consoled as:</p>
  <pre><code>ƒ () {
        i.Zl(), r.cs.ws(function () {
          return Pr(r.q_, o);
        });
      }
  </code></pre>
  <p>How do I extract the array data in my case?</p>