React Firestore data retrieval into array not working

Question

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.

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.

I have used console.log() on both the dummy data and the firestore data and they both log the same data array.

I am confused as to why the firestore data is not displaying the matches even though the array is saved correctly.

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 (
      <div id="against">
        {this.state.Matches.map(v => {
          return (
            <p>
              Team1: {v.team1}, Team2: {v.team2}, Winner: {v.winner}, Date:{v.date}
            </p>
          );
        })}
      </div>
    );
  }
}

Answer 1

The firebase request is asynchronous, so it will not be completed before the constructor is run.

You could put that logic in componentDidMount instead and use setState to update Matches when it is done:

Example

class MatchHistoryForm extends Component {
  state = { Matches: [] };

  componentDidMount() {
    firebase
      .firestore()
      .collection("Matches")
      .orderBy("date")
      .limit(10)
      .get()
      .then(querySnapshot => {
        const Matches = [];

        querySnapshot.forEach(function(doc) {
          Matches.push({
            team1: doc.data().team1,
            team2: doc.data().team2,
            winner: doc.data().winner,
            date: doc.data().date
          });
        });

        this.setState({ Matches });
      })
      .catch(function(error) {
        console.log("Error getting documents: ", error);
      });
  }

  render() {
    return (
      <div id="against">
        {this.state.Matches.map(v => {
          return (
            <p>
              Team1: {v.team1},
              Team2: {v.team2},
              Winner: {v.winner},
              Date: {v.date}
            </p>
          );
        })}
      </div>
    );
  }
}