title: Wait for Promises to fulfill before push them into an array (Javascript Promises)
body: <p><strong>Greetings Javascript developers</strong></p>
  <p>I'm relatively new to Javascript and ReactJS and I'm still learning new things every day. Currently I can't get rid of a problem:</p>
  <p><strong>My Component</strong></p>
  <pre><code>useEffect(() =&gt; {
      firebase
          .firestore()
          .collection('artworks')
          .doc(props.artworkid)
          .collection('images')
          .get()
          .then(images =&gt; {
  
              let arr = []
  
              images.docs.forEach(image =&gt; {
  
                  arr.push({
                      thumbnail: getImageURL(`${ image.data().imagename }_200x200.${ image.data().imageextension }`),
                      fullres: getImageURL(`${ image.data().imagename }_2000x2000.${ image.data().imageextension }`)
                  })
  
              })
  
          })
  }, [ props.artworkid ])
  </code></pre>
  <p><strong>My helper function</strong></p>
  <pre><code>export const getImageURL = (filename) =&gt; {
      return firebase
          .storage()
          .ref(filename)
          .getDownloadURL()
          .then(response =&gt; {
  
              return response
  
          })
  }
  </code></pre>
  <p>The problem is, that I always get an array full of Promises, which get fulfilled later:</p>
  <pre><code>[{
      &quot;thumbnail&quot;: Promise,
      &quot;fullres&quot;: Promise
  }, {
      &quot;thumbnail&quot;: Promise,
      &quot;fullres&quot;: Promise
  }, {
      &quot;thumbnail&quot;: Promise,
      &quot;fullres&quot;: Promise
  }, {
      &quot;thumbnail&quot;: Promise,
      &quot;fullres&quot;: Promise
  }]
  </code></pre>
  <p>My intention is to populate the array of objects (thumbnail and fullres image URLs stored on Google Firebase Cloud Storage) and render it as image gallery in this functional component.</p>
  <p><strong>How can I wait for the Promises to fulfill first before I push them into an array or State? I guess it has something to do with async/await… but I can't wrap my head arout it. Is there anyone able to help me?</strong></p>
  <p><a href="https://i.stack.imgur.com/5sl79.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5sl79.png" alt="React / Javascript code" /></a></p>