CODEWITHSUNDEEP
javascriptreactjsfirebase
via
via

Reputation: 503

Display images using map() in react is not working

I am trying to fetch images from Firebase storage and then display them in my react app. Currently, there are 4 images in my storage and want to display all.

enter image description here

Fetch 4 different images from storage properly but displayed first image(1.png) 4 times.

useEffect(() => {
    const fetchImages = async () => {

    let result = await storageRef.child('images').listAll();
        let urlPromises = result.items.map(imageRef => imageRef.getDownloadURL());
    
        return Promise.all(urlPromises);
    }
    
    const loadImages = async () => {
        const urls = await fetchImages();
        setFiles(urls);
    }
    loadImages();
    }, []);

am I using map wrong?

 <div>
   {files.map((index) => (
      <img key={index} src={files} />
   ))}
 </div>

Upvotes: 0

Views: 91

Answers (1)

wangdev87
wangdev87

Reputation: 8751

You should set each array element.

 <div>
   {files.map((file, index) => (
      <img key={'unique_key_string' + index} src={file} />
   ))}
 </div>

Upvotes: 3

Related Questions