I am working on my Portfolio, and currently i am mapping over an array to create a list of projects that contain multiple images as a Slider(Swiper) Component.
Now what i need would be the possibility to also include videos instead of an image. So i think i might need something that checks if the passed file is an image or a video and then selects the fitting html tag ( / ) Is there a simple way to achieve this?
My Code sample (reduced to relevant parts):
Mapping over a Project Component to generate projects:
{allData.map((project) => (
<Project id={project.id} text={project.title} vids={project.videos} imgs={project.images} description={project.info} />
))}
Passing the data to the Project Component:
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>
))}
What the array looks like:
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
Can someone please help me out with this?
Try This:
const isImage = ['.gif','.jpg','.jpeg','.png']; //you can add more
const isVideo =['.mpg', '.mp2', '.mpeg', '.mpe', '.mpv', '.mp4'] // you can add more extention
//merge image and video in single array
const Project = ({ text, files, description }) => {
{files.map(e => (
<SwiperSlide>
<div className="image-container">
{ isImage?.includes(e) && <img className="image-center" src={e} /> }
{isVideo?.includes(e) && <video src={e} /> }
</div>
</SwiperSlide>
))}
}
Thanks.