How to visualize filestorage content of firebase in table at the view?

Question

I want to represent the downloadUrl's of firebase storage in datatable where we can see the files and download to the computer.

At the moment i have successfully get all files and the links , but how to get this links in table where users can click on it.

The function which get all firebase storage:

showFileUrl(){

   storageRef.child('UploadedFiles/').listAll().then(function(res) {
      res.items.forEach(function(folderRef) {
        folderRef.getDownloadURL().then(function(url) {

          console.log('Got download URL',url);
         });
        console.log("folderRef",folderRef.toString());
        var blob = null;
        var xhr = new XMLHttpRequest(); 
        xhr.open("GET", "downloadURL"); 
        xhr.responseType = "blob";       
        xhr.onload = function() 
        {
        blob = xhr.response;//xhr.response is now a blob object
        console.log("BLOB",blob)

        // var path = storageRef.child('UploadedFiles/').getDownloadURL(folderRef);
        // var zip = new JSZip();
        // zip.file(path,blob);
    }

        xhr.send();
      });

    }).catch(function(error) {
      console.log(error);
    });
  }

View tags:

  <table>
          <tbody>

              {urls.map((user) => {
                            return (
                              <tr key={Math.random()}>
                                  <td>{user}</td>
                              </tr>);}
              )}     
        </tbody>
      </table>

View output:

Answer 1

Set an auxiliar var to fill urls while arrives.

const urls = [];
res.items.forEach(function(folderRef) {
   folderRef.getDownloadURL().then(function(url) {
      urls.push(url);
   });
});

And then set one time in state and it will be ready to next step.

this.setState({ urls }):

Show list in view

render() {
  <div>
    {this.state.urls.map(url => (
       <a key={url} href={url}>url</url>
    ))
  </div>
}