title: Parsing firebase query data in reactjs
body: <p>I am using firebase cloud firestore for storing data. And I am developing a web app using reactjs. I have obtained documents using the following function:</p>
  
  <pre><code>getPeoples() {
          let persons = [];
          firestore.collection("students")
              .get()
              .then(function (querySnapshot) {
                  querySnapshot.forEach((doc) =&gt; {
                      var person = {};
                      person.name = doc.data().Name;
                      person.course = doc.data().Course;
                      persons.push(person);
                  })
              });
          console.log(persons);
          return persons;
      }
  </code></pre>
  
  <p>I am getting the desired data, but when I am iterating through <strong>persons</strong> array, it says it has length of 0.</p>
  
  <p>here is the console output when I am displaying complete persons array and its length.</p>
  
  <p>The length should be 14, but it shows 0. Please correct me what is wrong with me?</p>
  
  <p><a href="https://i.stack.imgur.com/gtsaX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gtsaX.jpg" alt="enter image description here"></a></p>
  
  <p>I want to display the output in the html inside the <code>render()</code> method of react component.</p>
  
  <p>The output of </p>
  
  <pre><code> const peoples = this.getPeoples();
          console.log(peoples);
  </code></pre>
  
  <p>It is: 
  <a href="https://i.stack.imgur.com/aTzjp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aTzjp.jpg" alt="enter image description here"></a></p>
  
  <p>The complete render method looks like:</p>
  
  <pre><code>render() {
          const peoples = this.getPeoples();
          console.log(peoples);
          return (
              &lt;div className="peopleContainer"&gt;
                  &lt;h2&gt;Post-Graduate Students&lt;/h2&gt;
                  {/* &lt;h4&gt;{displayPerson}&lt;/h4&gt; */}
              &lt;/div&gt;
          );
      }
  </code></pre>