Pfthb

Im making an app by using react native and firestore.
Here a piece of my code;

getData(mat)
 let count = 0;
 let val;
db.collection("Yemek").doc("Materials").collection(mat).get().then((querySnapshot) => 
 querySnapshot.forEach((doc) => 
 count++;
 val = doc.data().value;
 matKey = mat+count.toString();
 this.state.array.push([
 meal=mat, value=val, status=false, key=matKey 
 ]);
 );
).catch(err => 
 console.log('Error getting documents', err);
 return false;
 );

componentWillMount()
 this.getData('vegetables');
 this.getData('legumes');
 this.getData('meat');
 this.getData('milk');
 this.getData('others');

render() 
return (//Render components)

Im rendering components with array located in state. But its return null because app rendering components before query ends. I searched yesterday. i guess i should use promises but i failed to use that. Could you help me?

Usually the recommended way to do something like that is to use state. In your constructor, initialize your state, and set a boolean value (for example 'loading') to indicate that your page is loading. Once your loading is complete, set the loading value to false to indicate that loading is complete. This will cause your class to re-render.

For consistency, you could use conditional rendering; if the page is still loading, show an activity indicator, otherwise show your page content. Both of these items are well represented with examples here and elsewhere.