[Solved]-React - Render happening before data is returned and not updating component-Reactjs

The problem is that you set the state before the promise is resolved. Change the code in the following way:

  GetCoffeeList() {
  coffeeCollection.get().then((querySnapshot) => {
      const cups = []
      querySnapshot.forEach(function (doc) {
              cups.push({ name: doc.id})
      });
      console.log('Updating state')
      console.log(cups)
      this.setState({ coffeeList: cups })
      console.log('End GetCoffeeList')
  })
}