title: Download all images by their URL in React JS to Client
body: <p>I am looking for a way to download multiple images in a given array, filled with image URLs, by clicking a download button.</p>
  
  <p>So far I am able to download a single image.</p>
  
  <pre><code>
  class Images extends Component {
      constructor(props) {
          super(props)
          this.state = {
              imageUrl: "",
              imageArray: [
  https://images.unsplash.com/photo-1578895210405-907db486c111?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=661&amp;q=80,
  https://images.unsplash.com/photo-1572166365087-96ac83103260?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80,
  https://images.unsplash.com/photo-1508706000025-b720ee541485?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1410&amp;q=80],
  
          }
      }
  
      fileDownloadHandler = async (pictureUrl) =&gt; {
          console.log(pictureUrl)
          const response = await fetch(pictureUrl);
          response.blob().then(blob =&gt; {
              let url = window.URL.createObjectURL(blob);
              let a = document.createElement('a');
              a.href = url;
              a.download = 'picture.jpeg';
              a.click();
          });
      }
  
      render() {
          return (
                  &lt;button type='button' onClick={()=&gt;this.fileDownloadHandler(this.state.imageArray[0])}&gt;Download Pictures&lt;/button&gt;
  }
  </code></pre>