title: ReactJS, multiple fetches and rendering the data
body: <p>I'm pretty new to React and I've been struggling with fetching the data for quite a few days for my first React project.</p>
  
  <p>I basically have a list of cards, split in two components: CardsList and Card. What I'm trying to do is to get the data for each card. My problem is, that I barely understood how fetching works for a single endpoint, and trying to fetch data from multiple endpoints at the same time seems to beat me.</p>
  
  <p>I tried following an example from a blog explaining fetch, and came up with this:</p>
  
  <pre><code>export default class CardsList extends React.Component {
  constructor(props) {
      super(props);
  
      this.state = {
          details: [],
          attachments: []
      };
  }
  
  
  componentDidMount() {
  
      //API and DEFAULT_QUERY have been set here, don't mind the ellipses
      var API = '...';
      var DEFAULT_QUERY = this.props.data;
  
  
      var apiRequest1 = fetch(API + DEFAULT_QUERY, {
          method: 'GET',
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
          },
          credentials: 'include',
      }).then(response =&gt; response.json());
  
      var apiRequest2 = fetch(API + DEFAULT_QUERY + '_attachment', {
          method: 'GET',
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
          },
          credentials: 'include',
      }).then(response =&gt; response.json());
  
      var combinedData = {"apiRequest1":{},"apiRequest2":{}};
      Promise.all([apiRequest1, apiRequest2]).then( values =&gt; {
          combinedData["apiRequest1"] = values[0];
          combinedData["apiRequest2"] = values[1];
          return combinedData;
      });
  }
  
  render() {
  
      const { combinedData } = this.state;
  
      let list = [];
      for(var item of combinedData["apiRequest2"]) {
          list.push(
              &lt;Card data={item} key={list.length}/&gt;
          );
      }
  
      return (
          &lt;div className="container"&gt;
              &lt;div className="row"&gt;
                  {list}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }}
  </code></pre>
  
  <p>As a first attempt I tried to feed the card component only the data from the second fetch. The console shows: "Uncaught TypeError: Cannot read property 'apiRequest2' of undefined".</p>
  
  <p>I'm trying to learn a little bit from everywhere but I'm probably making things more confusing. What am I doing wrong and how should I go about this? Apologizes if I might seem confusing too.</p>
  
  <p>EDIT: On the first fetch I'm trying to get the title, author and date of the card and on the second fetch I'm trying to get the preview image of the card.</p>
  
  <p>The first fetch is something like this:
  data:[{title: "test", body: "test", author: "1", id: "1",...},…</p>
  
  <p>and the second fetch:
  data:[{image_url: "abc.png", id: "1",...},...</p>