title: render array data gotten from firebase firestore
body: <p>I am trying to get the data inside my messages array field from firestore, I can see the data in my debugger, but cannot fetch a single part of the message. I am roughly new to react native and firebase. kindly direct me. The image below is the data i want to fetch from my firestore database
  <a href="https://i.stack.imgur.com/i3GF1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i3GF1.png" alt="enter image description here"></a></p>
  
  <p>below is my sample code. </p>
  
  <pre><code>          const { currentUser } = Firebase.auth;
            const userUid = currentUser.uid;
            const chatroomMessages = [];
  
            const ref = await Firebase.firestore.collection('chatrooms');
            const getDoc = ref.doc(this.props.item.key)
                                .onSnapshot(doc =&gt; {
                                  if (!doc.exists) {
                                    console.log('No such document!');
                                    return;
                                  }
                                  //const { createdAt } = change.data();
  
                                 const messages = doc.data();
  
                                 const data = messages.messages;
  
                                 //const { ...text } = data;
  
                                 chatroomMessages.push({
                                   data
                                   })
  
                                 this.setState({
                                   chatroomMessages,
                                   });
  
                                      console.log('Document data:', chatroomMessages);
                                });
  </code></pre>