title: Making two API calls in the same component - reactjs
body: <p>I'm building an app that produces two tables, each with 5 results. I can't seem to figure out how to crack the code when it comes to mapping over the second table. Table one is {renderItems}, table two is {renderUsers}. The API call for each is at the top of the App.js file detailed below, as 'repoURL' and 'userURL' respectively.</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  
  const repoURL = 'https://api.github.com/search/repositories?q=stars:&gt;1&amp;s=stars&amp;type=Repositories&amp;per_page=5';
  const userURL = 'https://api.github.com/search/users?q=created:&gt;=2016-05-29&amp;type=Users&amp;s=followers&amp;per_page=5';
  
  export default class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
       items: []
     }
   }
  
   componentDidMount() {
     var _this = this;
  
     axios.get(repoURL)
     .then(function(res){
       console.log(res)
       _this.setState({
         items: res.data.items
       });
     })
     .catch(function(e) {
       console.log('ERROR ', e);
     })
  
     axios.get(userURL)
     .then(function(res){
       console.log(res)
       _this.setState({
         users: res.data.items
       });
     })
     .catch(function(e) {
       console.log('ERROR ', e);
     })
   }
  
   render() {
     const renderItems = this.state.items.map(function(item, i) {
       return (
         &lt;div key={i} className="row"&gt;
           &lt;div className="col-md-3"&gt;{item.id}&lt;/div&gt;
           &lt;div className="col-md-3"&gt;{item.name}&lt;/div&gt;
           &lt;div className="col-md-3"&gt;{item.description}&lt;/div&gt;
           &lt;div className="col-md-3"&gt;{item.stargazers_count}&lt;/div&gt;
         &lt;/div&gt;
       );
     });
     console.log(renderItems)
       const renderUsers = this.state.items.map(function(item, i) {
         return (
           &lt;div key={i} className="row"&gt;
             &lt;div className="col-md-3"&gt;{item.id}&lt;/div&gt;
             &lt;div className="col-md-3"&gt;{item.name}&lt;/div&gt;
             &lt;div className="col-md-3"&gt;{item.description}&lt;/div&gt;
             &lt;div className="col-md-3"&gt;{item.stargazers_count}&lt;/div&gt;
           &lt;/div&gt;
         );
       });
       console.log(renderUsers)
     return (
       &lt;div className="App"&gt;
  
           &lt;div className="row"&gt;
  
             &lt;div className="col-md-6 "&gt;
               &lt;button type="button" id="hot_repo" className="btn btn-lg btn-danger"&gt;Hot Repositories&lt;/button&gt;
             &lt;/div&gt;
             &lt;div className="col-md-6 "&gt;
               &lt;button type="button" id="prolific_users" className="btn btn-lg btn-success"&gt;Prolific Users&lt;/button&gt;
             &lt;/div&gt;
  
             &lt;div id="repoTable" className="col-md-6 panel panel-default"&gt;
               &lt;div id="repoHeader" className="panel-heading"&gt;5 Most Starred Repositories Last Month&lt;/div&gt;
               &lt;div className="repoSubHeader panel-body"&gt;
                 &lt;div id="repoId" className="col-md-3"&gt;ID&lt;/div&gt;
                 &lt;div id="repoName" className="col-md-3"&gt;Name&lt;/div&gt;
                 &lt;div id="repoDescription" className="col-md-3"&gt;Description&lt;/div&gt;
                 &lt;div id="repoStars" className="col-md-3"&gt;Stars&lt;/div&gt;
               &lt;/div&gt;
               &lt;div className="row"&gt;
               {renderItems}
               &lt;/div&gt;
             &lt;/div&gt;
  
             &lt;div id="userTable" className="col-md-6 panel panel-default"&gt;
               &lt;div id="userHeader" className="panel-heading"&gt;5 Most Active Users&lt;/div&gt;
               &lt;div className="userSubHeader panel-body"&gt;
                 &lt;div id="userId" className="col-md-3"&gt;ID&lt;/div&gt;
                 &lt;div id="userLogin" className="col-md-3"&gt;Login&lt;/div&gt;
                 &lt;div id="userAvatar" className="col-md-3"&gt;Avatar&lt;/div&gt;
                 &lt;div id="userFollowers" className="col-md-3"&gt;Followers&lt;/div&gt;
               &lt;/div&gt;
               &lt;div className="row"&gt;
               {renderUsers}
               &lt;/div&gt;
             &lt;/div&gt;
  
           &lt;/div&gt;
       &lt;/div&gt;
     );
   }
  }
  </code></pre>
  
  <p>I feel like I'm missing something obvious, but I've been looking at it so long it's not going to be obvious to me at this point.  Any help appreciated.</p>