title: How to finish all fetch before executing next function in React?
body: <p>Using ReactJS, I have two different API points that I am trying to get and restructure: <code>students</code> and <code>scores</code>. They are both an array of objects.</p>
  
  <p><strong>My goal is</strong> : first, get students and scores, and second, with students and scores saved in state, I will modify them and create a new state based on students and scores state. In short, I have 3 functions: <code>getStudents</code>, <code>getScores</code>, and <code>rearrangeStudentsAndScores</code>. <code>getStudents</code> and <code>getScores</code> need to finish before <code>rearrangeStudentsAndScores</code> can run.</p>
  
  <p><strong>My problem is</strong>: sometimes <code>rearrangeStudentsAndScores</code> will run before <code>getScores</code> would complete. That messed <code>rearrangeStudentsAndScores</code> up. But sometimes it would complete. Not sure why it works 50% of the time, but I need to make it work 100% of the time. </p>
  
  <p>This is what I have to <code>fetch</code> <code>students and scores</code> in my <code>Client</code> file:</p>
  
  <pre><code>function getStudents(cb){
      return fetch(`api/students`, {
          headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
          }
      }).then((response) =&gt; response.json())
      .then(cb)
  };
  
  function getScores(cb){
      return fetch(`api/scores`, {
          headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
          }
      }).then((response) =&gt; response.json())
      .then(cb)
  };
  </code></pre>
  
  <p>I then combined them together:</p>
  
  <pre><code>function getStudentsAndScores(cbStudent, cbScores, cbStudentsScores){
      getStudents(cbStudent).then(getScores(cbScores)).then(cbStudentsScores);
  }
  </code></pre>
  
  <p>In my react app, I have the following:</p>
  
  <pre><code>getStudentsAndScores(){
      Client.getStudentsAndScores(
          (students) =&gt; {this.setState({students})},
          (scores) =&gt; {this.setState({scores})},
          this.rearrangeStudentsWithScores
      )
  }
  
  rearrangeStudentsWithScores(){
      console.log('hello rearrange!')
      console.log('students:')
      console.log(this.state.students);
      console.log('scores:');
      console.log(this.state.scores);        //this returns [] half of the time
      if (this.state.students.length &gt; 0){
          const studentsScores = {};
          const students = this.state.students;
          const scores = this.state.scores;
          ...
      }
  }
  </code></pre>
  
  <p>Somehow, by the time I get to <code>rearrangeStudentsWithScores</code>, <code>this.state.scores</code> will still be <code>[]</code>. </p>
  
  <p>How can I ensure that <code>this.state.students</code> and <code>this.state.scores</code> are both loaded before I run <code>rearrangeStudentsWithScores</code>?</p>