Scroll through an array of files and load each one with React

Question

I am trying to do what I thought would be a simple task. I have an array of URLs that I would like to skip and download to the client computer when the user clicks a button.

Right now I have a parent component containing a button and an array of URLs (in state) that I would like to skip and load. For some reason, the way I do this now downloads only one of the files, and not the entire contents of the array.

Any idea how to do this correctly in React?

handleDownload(event){
        var downloadUrls = this.state.downloadUrls;
        downloadUrls.forEach(function (value) {
            console.log('yo '+value)
        const response = {
              file: value,
        };                
            window.location.href = response.file;

        })
    }

Answer 1

setTimeout, .

handleDownload(event){
    var downloadUrls = this.state.downloadUrls.slice();
    downloadUrls.forEach(function (value, idx) {
        const response = {
          file: value,
        };
        setTimeout(() => {
            window.location.href = response.file;
        }, idx * 100)
    })
}

Chrome .