title: React Firestore data retrieval into array not working
body: <p>So, I am trying to retrieve data from my firestore and display it onto my webpage, I have tried everything and exhausted every question on this site to no avail.</p>
  
  <p>When I use the code below, nothing renders on the website page, however when I use the commented code with dummy data instead of the firestore query retrieval data, the data renders as it should. </p>
  
  <p>I have used console.log() on both the dummy data and the firestore data and they both log the same data array.</p>
  
  <p>I am confused as to why the firestore data is not displaying the matches even though the array is saved correctly.</p>
  
  <pre><code>class MatchHistoryForm extends Component {
    constructor(props) {
      super(props);
  
      var Matches = [];
      firebase
        .firestore()
        .collection("Matches")
        .orderBy("date")
        .limit(10)
        .get()
        .then(function(querySnapshot) {
          querySnapshot.forEach(function(doc) {
            Matches.push({
              team1: doc.data().team1,
              team2: doc.data().team2,
              winner: doc.data().winner,
              date: doc.data().date
            });
          });
        })
        .catch(function(error) {
          console.log("Error getting documents: ", error);
        });
  
      // var Matches = [{
      //  team1: "asdf",
      //  team2: "jkl",
      //  winner: "team1",
      //  date: "1/2/2018",
      // }, {
      //  team1: "qwer",
      //  team2: "yuio",
      //  winner: "team2",
      //  date: "1/8/2018",
      // }];
  
      console.log(Matches);
      this.state = {
        Matches: Matches
      };
    }
  
    render() {
      return (
        &lt;div id="against"&gt;
          {this.state.Matches.map(v =&gt; {
            return (
              &lt;p&gt;
                Team1: {v.team1}, Team2: {v.team2}, Winner: {v.winner}, Date:{v.date}
              &lt;/p&gt;
            );
          })}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>