I have array of images coming from external API, I want to filter images which are broken before showing them on carousel. as you can see now I map every image and showing MissingImage component as unloader if image is missing, but in my situation sometimes there are more than half images not available on API. how can I skip images if they aren't available before passing them to Carousel component?
{images.map((img, i) => (
<Dot
key={i}
type="button"
onClick={() => {
setThumbsPosition(i);
goToSlide(i);
setActiveSlide(i);
}}
active={activeSlide === i}
ref={i === 0 && slideRef}
>
<SliderDotImage>
<Img
loading="lazy"
src={[img.url.bigger]}
unloader={<MissingImage small />}
/>
</SliderDotImage>
</Dot>
))}
You can use && operator to check whether we have an image URL or not:
{images.map((img, i) => (
<Dot
key={i}
type="button"
onClick={() => {
setThumbsPosition(i);
goToSlide(i);
setActiveSlide(i);
}}
active={activeSlide === i}
ref={i === 0 && slideRef}
>
<SliderDotImage>
<Img
loading="lazy"
src={img?.url && img.url} // or src={img && img.url}
unloader={<MissingImage small />}
/>
</SliderDotImage>
</Dot>
))}