title: React: How to wait data before using "this.state.x" into a function?
body: <p>I'm currently learning React, and some stuff are not so easy for a newbie...</p>
  
  <p>I have a simple component which <code>renders</code> this (note that it renders a <code>li</code> array thanks to <strong>function <code>getSlots</code></strong>):</p>
  
  <pre><code>render () {
      return (
          &lt;ul&gt;
            {this.getSlots(this.state.viewing).map(item =&gt; &lt;li key={item}&gt;{item}&lt;/li&gt;)}
          &lt;/ul&gt;
      )
    }
  </code></pre>
  
  <p>Function <code>getSlots</code> is:</p>
  
  <pre><code>constructor (props) {...}
  
  getSlots (viewing) {
  
      SOME STUFF...
  
      const monday = this.state.house.monday
  
      return SOME STUFF...
    }
  
  componentDidMount () {...}
  
  render () {...}
  </code></pre>
  
  <p>The point is that <code>getSlots</code> needs data to be fetched in <code>componendDidMount</code> to work. Indeed, at this time, <code>getSlots</code> doesn't work (it crashes) because it runs before data are fetched (<code>this.state.house.monday</code> is "empty" when it runs).</p>
  
  <p>How do I wait for data to be fetched before running <code>getSlots</code>? Thanks for your clue.</p>