How do you render an image from Firebase Storage using .map method?

Question

I'm attempting to render an image for each component using the.Map() method from Firebase Storage combined with Firestore.

            {Object.values(getData).map((data, index) => {
          getDownloadURL(ref(storage, `events/${data.name + data.artist + data.date + data.description}` ))
          .then((url) => {
            setImageSet(url)
            console.log(imageSet)
          })
          
          return(

          <CssVarsProvider>
            <Card variant="outlined" sx={{ width: 300, marginRight: 5}}>
              <AspectRatio>
                <div>
                  <img src={imageSet}/> 
                </div>
              </AspectRatio>
              <Typography mt={2}>{data.name}</Typography>
              <Typography level="body2">{data.description}</Typography>
            </Card>
            </CssVarsProvider>
            
          )
        })}

When I create 1 test Array on Firestore, the image renders. But if I create two, then it is like it is trying to render two images on 1 component. How do I fix this? Sorry if I am not clear enough, since this is my first time posting on Stackoverflow.

Cheers

Answer 1

I have fixed the issue by assigning the URL value directly into firestore.

  const uploadImage = async () => {
if (imageUpload == null) return
const imageRef = ref(storage, `events/${eventName + artistName + eventDate + eventDescription}`)
uploadBytes(imageRef, imageUpload).then(() => {
  console.log("image uploaded")
  getDownloadURL(imageRef)
    .then((url) => {
      setGetImage((prev) => [...prev, url])
      console.log(getImage)
    })
  
})

}

const uploadData = async () => {

await setDoc(doc(db, "events", eventName), {
  name: eventName,
  artist: artistName,
  date: eventDate,
  description: eventDescription,
  uri: getImage,
})
console.log("db added")

}