title: React, fetch from multiple endpoints and render data in table
body: <p>I have rest api and I'm writing some frontend for this (1st time using react). I need to get data from few endpoints and  show it in table. <s> For that moment I'm getting data from one endpoint and rendering it and it's working fine. Url's to endpoints are looking like:
      <a href="http://localhost/app.php/api/endpointname/123?from=2017-05-05&amp;to=2017-05-07" rel="nofollow noreferrer">http://localhost/app.php/api/endpointname/123?from=2017-05-05&amp;to=2017-05-07</a></p>
  
  <p>Endpoint name will be one of this: visits, visitors, entrances. </s></p>
  
  <p>All endpoints are returning objects looking like this:</p>
  
  <pre><code>2017-05-05: 5,
  2017-05-06: 1,
  2017-05-07: 4,
  </code></pre>
  
  <p>How to render it after that, it's good idea to write some model component getting data from all endpoints and returning one array from this?</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
  
  class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              visits: [],
              visitors: [],
              entrances: [],
              type: props.type,
              reportFor: props.reportFor,
              websiteId: props.websiteId,
              date: props.date,
              dateTo: props.dateTo
          };
      }
  
      GetUrl(endpoint) {
          let date;
          if (this.state.type === 'daily') {
              date = 'from=' + this.state.date + '&amp;to=' + this.state.dateTo;
          } else if (this.state.type === 'hourly') {
              date = 'day=' + this.state.date;
          }
  
          return 'http://localhost/app.php/api/'
              + this.state.type + '/'
              + endpoint + '/'
              + this.state.websiteId + '?'
              + date;
      }
  
      componentDidMount() {
          let endpoints = ['visits', 'visitors', 'entrances'];
  
          endpoints.map((endpoint) =&gt;
              fetch(this.GetUrl(endpoint))
                  .then((response) =&gt; response.json())
                  .then((responseJson) =&gt; {
                      this.setState({
                      [endpoint]: responseJson
                      });
                  }).catch((error) =&gt; {
                  console.error(error);
              })
          )
      }
  
      render() {
          let visits = this.state.visits;
          let visitors = this.state.visitors;
          let headers = ['Date', 'Visits', 'Entrances', 'Visitors'];
  
          return (
              &lt;div className="col-sm-6 col-md-6 col-lg-6 column"&gt;
                  &lt;table className="table table-hover"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          {headers.map((header) =&gt; &lt;th&gt;{header}&lt;/th&gt;)}
                      &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      {Object.entries(visits).map(([date, visit]) =&gt; &lt;tr&gt;
                          &lt;td&gt;{date}&lt;/td&gt;
                          &lt;td&gt;{visit}&lt;/td&gt;
                      &lt;/tr&gt;)}
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          )
      }
  }
  
  ReactDOM.render(&lt;App type='daily' reportFor='visits' websiteId='5d918b7d-91ca-4f15-95df-fd8c71a6c2b9' date='2017-05-05'
                   dateTo='2017-05-10'/&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>I will be grateful for advice how I can refactor this code maybe for smaller components or something. It's my 1st react app and I don't feel how to separate components.</p>
  
  <p>Greetings </p>
  
  <p>Edit: Now I'm getting data from all endpoints but still don't know how to render result in right way.</p>