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?
you can loop over the images and show them:
using map:
...
images.map((image) => {
return <div>
<img src={image} alt="title" />
</div>
})
...