Tengo una variedad de imágenes provenientes de una API externa, quiero filtrar las imágenes que están rotas antes de mostrarlas en el carrusel. como puede ver ahora mapeo cada imagen y muestro el componente MissingImage como descargador si falta la imagen, pero en mi situación a veces hay más de la mitad de las imágenes que no están disponibles en la API. ¿Cómo puedo omitir imágenes si no están disponibles antes de pasarlas al componente Carrusel?
{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> ))}Puede usar el operador && para verificar si tenemos una URL de imagen o no:
{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> ))}