React App Rendering Before Firestore Data Has Loaded - reactjs

Question

I am trying to load data from Firestore and show it in the gantt-chart, but it renders before it has loaded the data from firebase. So I call setState inside of componentDidMount because I thought this would then call the render again at which point the data would be there. But it is still sitting empty. Any ideas as to why?
import React, { Component } from 'react';
import Gantt from './Gantt';
import Toolbar from './Toolbar';
import MessageArea from './MessageArea';
import Firebase from './Firebase';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
currentZoom: 'Days',
messages: [],
projects: [],
links: []
};
this.handleZoomChange = this.handleZoomChange.bind(this);
this.logTaskUpdate = this.logTaskUpdate.bind(this);
this.logLinkUpdate = this.logLinkUpdate.bind(this);
}
componentDidMount() {
const db = Firebase.firestore();
var projectsArr = [];
db.collection('projects').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
let project = doc.data();
projectsArr.push({id: 1, text: project.name, start_date: '15-04-2017', duration: 3, progress: 0.6});
});
});
this.setState({
projects: projectsArr
});
}
addMessage(message) {
var messages = this.state.messages.slice();
var prevKey = messages.length ? messages[0].key: 0;
messages.unshift({key: prevKey + 1, message});
if(messages.length > 40){
messages.pop();
}
this.setState({messages});
}
logTaskUpdate(id, mode, task) {
let text = task && task.text ? ` (${task.text})`: '';
let message = `Task ${mode}: ${id} ${text}`;
this.addMessage(message);
}
logLinkUpdate(id, mode, link) {
let message = `Link ${mode}: ${id}`;
if (link) {
message += ` ( source: ${link.source}, target: ${link.target} )`;
}
this.addMessage(message)
}
handleZoomChange(zoom) {
this.setState({
currentZoom: zoom
});
}
render() {
var projectData = {data: this.state.projects, links: this.state.links};
return (
<div>
<Toolbar
zoom={this.state.currentZoom}
onZoomChange={this.handleZoomChange}
/>
<div className="gantt-container">
<Gantt
tasks={projectData}
zoom={this.state.currentZoom}
onTaskUpdated={this.logTaskUpdate}
onLinkUpdated={this.logLinkUpdate}
/>
</div>
<MessageArea
messages={this.state.messages}
/>
</div>
);
}
}
export default App;

Answer 1

You are calling setState outside of the then callback.
So Change
db.collection('projects').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
let project = doc.data();
projectsArr.push({id: 1, text: project.name, start_date: '15-04-2017', duration: 3, progress: 0.6});
});
});
this.setState({
projects: projectsArr
});
To
db.collection('projects').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
let project = doc.data();
projectsArr.push({id: 1, text: project.name, start_date: '15-04-2017', duration: 3, progress: 0.6});
});
this.setState({
projects: projectsArr
});
});
Also, as a general pattern you can do something like this:
class AsyncLoad extends React.Component {
state = { data: null }
componentDidMount () {
setTimeout(() => {
this.setState({ data: [1, 2, 3]})
}, 3000)
}
render () {
const { data } = this.state
if (!data) { return <div>Loading...</div> }
return (
<pre>{JSON.stringify(data, null, 4)}</pre>
)
}
}
It's a common enough operation to create an HOC for it.