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 mented 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>
    );
  }
}

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 mented 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>
    );
  }
}

• javascript
• html
• reactjs
• firebase
• google-cloud-firestore

1 Answer 1

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

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

Example

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

  ponentDidMount() {
    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>
    );
  }
}