I Want To Display The ImagesUrl's In The Array according To The Number of images the Array has, using Reactjs

Question

I am using React Carousel from The dependency react-responsive-carousel to display the image the user has uploaded on firebase I query the images in an Array Like:

image: [imageUrl/0, imageUrl/1, imageUrl/2, imageUrl/3, imageUrl/4] // Maximum is 5
    //then display it like 
<Carousel 
         infiniteLoop
         showStatus={true}
         showIndicators={true}
         showThumbs={true}
     >
         <div>
         <img src={imagesUrl[0]} alt="title"/>  
         </div>   
         <div>
         <img src={imagesUrl[1]} alt="title"/> 
         </div>
         <div>
         <img src={imagesUrl[2]} alt="title"/> 
         </div>
         <div>
         <img src={imagesUrl[3]} alt="title"/> 
         </div>
         <div>
         <img src={imagesUrl[4]} alt="title" />
         </div>
     </Carousel>

It Works fine But when the user uploaded 3 images it will show 5 images the last 2 will be blank white images, is it possible to Map the Array in a way I only show what is in the array?

Answer 1

you can loop over the images and show them:

using map:

...
images.map((image) => {
    return <div>
        <img src={image} alt="title" />
    </div>
})
...