Display images using map() in react is not working

Question

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.

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>

<img key={index} src={index} />, setting src to files incorrect — Kalhan
– Kalhan, Commented Nov 9, 2020 at 2:52

topdev87 · Accepted Answer · 2020-11-09 02:52:09Z

3

You should set each array element.

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

answered Nov 9, 2020 at 2:52

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

via Over a year ago

Oh! it's worked! Thank you so much. I made simple mistake.

Collectives™ on Stack Overflow

Display images using map() in react is not working

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related