title: React useEffect and Axios: Making chained API calls within 'then'
body: <p>I'm working with the NHL API and retrieving hockey stats for my app. The API has multiple endpoints that I'm using to access player stats. </p>
  
  <p><code>Roster endpoint</code></p>
  
  <p><a href="https://statsapi.web.nhl.com/api/v1/teams/3/roster" rel="nofollow noreferrer">https://statsapi.web.nhl.com/api/v1/teams/3/roster</a></p>
  
  <p>After I retrieve this data I can access an object called <code>person</code> which contains an ID number for that individual player's API endpoint that contains pedigree information (i.e. country they are from, height/weight, etc..). I can then send an API request that looks like this to retrieve more data for that individual player, in this case <code>8476191</code> is the ID number.</p>
  
  <p><code>Pedigree Info endpoint:</code></p>
  
  <p><a href="https://statsapi.web.nhl.com/api/v1/people/8476191" rel="nofollow noreferrer">https://statsapi.web.nhl.com/api/v1/people/8476191</a></p>
  
  <p>I can also pass the ID number, <code>8476191</code>, to a stats endpoint which contains stats for the same player.</p>
  
  <p><code>Stats endpoint:</code></p>
  
  <p><a href="https://statsapi.web.nhl.com/api/v1/people/8476191/stats?stats=statsSingleSeason&amp;season=20182019" rel="nofollow noreferrer">https://statsapi.web.nhl.com/api/v1/people/8476191/stats?stats=statsSingleSeason&amp;season=20182019</a></p>
  
  <p>What I would like to do is send a request to the <code>Roster endpoint</code>, grab the ID numbers for every player on the roster, and then make subsequent API calls to the <code>Pedigree info endpoint</code> and the <code>stats endpoint</code> using the ID number.</p>
  
  <p>How can I make an <code>Axios</code> get request to the roster endpoint and then nest two more get requests within the call that can access the ID number from the first call? Here is what I attempted:</p>
  
  <pre><code>// State for retrieving player ID numbers from roster endpoint
  const [playerIDNumbers, setPlayerIDNumbers] = useState([]);
  
  useEffect(() =&gt; {
      // Get the roster data, set playerIdNumbers to an array containing all the ID numbers
     axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams[teamName].id}/roster`)
         .then(res =&gt; {
             setPlayerIDNumbers(Object.values(res.data.roster).map((x) =&gt; {
                 return x.person.id;
             }));
             // res now contains all the ID numbers
             console.log(res);
         })
         // After grabbing all the ID numbers for each player on the roster, I want to map through each ID 
         // in the array and send a request for each player's pedigree data
         .then(res =&gt; {
             // Later in my code I created an array to contain the IDs called playerIDArr
             playerIDArr.map((playerID) =&gt; {
                 axios.get(`https://statsapi.web.nhl.com/api/v1/people/${playerID}/`)
             })
             console.log('Player ID call returned : ' + res);
         })
         // After this is done I want to make a third request using the ID numbers to grab the stats /////from the stats endpoint
         /* Stats Axios request would go here */
         .catch(err =&gt; {
             console.log('Error : ' + err);
         })
  }, [])
  </code></pre>