title: ReactJS several fetch requests with promise
body: <p>I need several fetch requests in my application to fetch data from different collections. Therefore, I wanted to use promises to make it work.
  I have never used promises and despite my research on stackoverflow and other websites, I was not able to make it work.</p>
  
  <p>Essentially, I need two fetch requests and I want to save the result of these requests to 2 different states.</p>
  
  <p>This is what I have as of right now:</p>
  
  <pre><code>getFormData () {
      fetch('/formdata', {
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
      }})
          .then(res =&gt; res.json())
  }
  
  getIcons () {
      fetch('/icons', {
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
      }})
          .then(res =&gt; res.json())
  }
  
  getData () {
      return Promise.all([this.getFormData(), this.getIcons()])
  }
  
  componentDidMount () {
      this.getData()
          .then(([formdata, icons]) =&gt; {
              console.log(form + "  " + icons);
          })
           .catch(err =&gt; console.log('There was an error:' + err))
  }
  </code></pre>
  
  <p>But this did not work. 
  I also tried putting the promise in my <code>componentDidMount()</code> lifecycle method, like so:</p>
  
  <pre><code>componentDidMount () {
      return Promise.all([this.getFormData(), this.getIcons()])
          .then(([formdata, icons]) =&gt; {
              console.log(formdata + "  " + icons);
          })
           .catch(err =&gt; console.log('There was an error:' + err))
  }
  </code></pre>
  
  <p>But this didn't work eiter.
  I would like to save the data from <code>/formdata</code> to a state with the same name and the same goes for icons, but in the console it simply returns <code>undefined undefined</code>, instead of the formdata and the icons.</p>
  
  <p>Where am I making a mistake in my code? How would I fix it?</p>