title: How to set state and load the information before render with firebase?
body: <p>I am currently using firebase realtime database to store information and am using component did mount to set the state. However, the states which are updated are initially set as null. Therefore, the first time the page loads, it renders exactly that - null, nothing.</p>
  <p>I have tried passing props to the component through the main app.js component but it didnt work either. Are there any suggesstions on how to work my way around this?</p>
  <p>The objective is to get the component to only render once the state has updated from null.</p>
  <p>My code is below;</p>
  <pre><code>this.state = {
  
  burnItClasses: null,
  masterAbsClasses: null,
  BodyToneClasses: null,
  }
  
  componentDidMount(){
  
  let bodyToneClasses = [];
  let btRef = firebase.database().ref(&quot;Bodytone&quot;);
  
  btRef.on('value', (data)=&gt;{
  let bClassObjs = data.val();
  let keys = Object.keys(bClassObjs);
  keys.forEach((el)=&gt;{
  bodyToneClasses.push(bClassObjs[el])
  })
  
  this.setState({
  BodyToneClasses: bodyToneClasses,        
         })  
     });
  
  }
  </code></pre>
  <p>JSX:</p>
  <pre><code>&lt;ul className=&quot;classtimesanddates&quot;&gt;
  {this.state.BodyToneClasses ? this.state.BodyToneClasses.map((element)=&gt;{
  return &lt;li&gt;{element.date} at {element.time}&lt;/li&gt;
  }) : &quot;No scheduled classes available&quot;}                                                                                                   
  &lt;/ul&gt;
  </code></pre>
  <p>Thanks for the assistance!</p>