Estoy trabajando en mi Portafolio, y actualmente estoy mapeando una matriz para crear una lista de proyectos que contienen múltiples imágenes como un componente Slider (Swiper).

Ahora lo que necesito sería la posibilidad de incluir también videos en lugar de una imagen. Entonces, creo que podría necesitar algo que verifique si el archivo pasado es una imagen o un video y luego seleccione la etiqueta html adecuada (/). ¿Hay una manera simple de lograr esto?

Ejemplo de mi código (reducido a partes relevantes):

Mapeo sobre un Componente de Proyecto para generar proyectos:

 {allData.map((project) => ( <Project id={project.id} text={project.title} vids={project.videos} imgs={project.images} description={project.info} /> ))}

Pasando los datos al Componente del Proyecto:

 const Project = ({ text, vids, imgs, description }) => { {imgs.map(e => ( <SwiperSlide> <div className="image-container"> <img className="image-center" src={e} /> </div> </SwiperSlide> ))} {vids.map(video => ( <SwiperSlide> <video src={video} /> </SwiperSlide> ))}

Cómo se ve la matriz:

 import img1 from './img/1.jpg'; import img2 from './img/2.jpg'; import img3 from './img/3.jpg'; import video1 from './video/1.mp4'; const allData = [ { id:1, images: [img1, img2, img3] title: 'Example-title', }, { id:2, images: [img3] videos: [video1] title: 'Example-title', } export default allData

¿Puede alguien por favor me ayude con esto?