title: Updating parent component only after multiple child components have completed running
body: <p>I have a Parent react component with multiple child components that are created through a <code>.map()</code> function. I am passing in a function <code>addCallback()</code> as child props so I have a reference and can trigger all child's <code>handleRun()</code> function via the Parent.</p>
  
  <p>I'm trying to update state of my Parent component to <code>running = true</code> when all children are running and to <code>running = false</code> and render said status on the parent when all children have completed running. However the state doesn't seem to update in the particular sequence I specify.</p>
  
  <p>Here is how I'm doing it:</p>
  
  <pre><code>let promise1 = this.setState({isRunning:  true},
              () =&gt; {
                  this.state.childRef.map(x =&gt; x())
              });
  
  Promise.all([promise1])
      .then(() =&gt; this.setState({isRunning: false}))
  </code></pre>
  
  <p>Here's the entire code in codesandbox: <a href="https://codesandbox.io/s/sparkling-sunset-qzij1" rel="nofollow noreferrer">link</a> </p>
  
  <p>Would appreciate your help as I'm still pretty new to React (and Javascript in general). Thanks!</p>