How to display all images from firebase Storage in react js-CodePudding

I'm trying to display all images I have stored in firebase cloud storage. Though I can see the links with the help of console.log(fetchUrl), thanks to the Firebase Doc but I'm not able to display them on my screen. so I thought of using the useState method but still it doesn't work. I don't know why. I have seen one result that matches my answer but its firebase v8 and the v9 is very different from this. So please help me out here. It would be great help if you could translate the v8 to v9 from the above link for me.

const [url, setUrl] = useState([]);

useEffect(() => {

const overviewRef = ref(storage, `behance_projects/${params.id}/`);
listAll(overviewRef).then((res) => {
    res.items.forEach((imageRef) => {
        getDownloadURL(imageRef).then((fetchUrl) => {
            setUrl({
                urlLink: fetchUrl,
            })
        })
    })
}).catch((err)=> {
    console.log(err)
})
}, [params.id]);

This is how I tried to show in web.

{
   url.map((url, index) =>{
     return <img src={url.urlLink} key={index} alt="images" style={{width:"100%", 
     height:"auto"}}/>
   })
}

CodePudding user response：

While the v9 modular syntax is different, the way to deal with multiple asynchronous operations is still the same: use Promise.all.

In your case that'd be something like:

listAll(overviewRef).then((res) => {
    let promises = res.items.map((imageRef) => getDownloadURL(imageRef));
    Promise.all(promises).then((urls) => {
        setUrl({
            urlLink: urls,
        })
    })
}).catch((err)=> {
    console.log(err)
})

Now setUrl will be called when all download URLs have been determined. You can then loop over those URLs in the JSX to render them.