React how to map images from array stored in data for useParams product item-CodePudding

I'm a newbie to coding trying to learn React so here's my problem:

My Data file

import Car1 from '../../img/car1.jpg'
import Car2 from '../../img/car2.jpg'
const carsData = [
  {
    id: '1',
    image: [Car1, Car1, Car1, Car1],
    price: '$80 000',
  },
  {
    id: 2,
    image: [Car2, Car2, Car2, Car2],
  },
]

My ProductDetailsPage

import React, { useState } from "react";
import "./CarProductDetails.css";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Navigation, Thumbs } from "swiper";
import carsData from "../data/CarsData";
import { useParams } from "react-router-dom";

const CarProductDetails = () => {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  const { productId } = useParams();
  const thisProduct = carsData.find((product) => product.id === productId);
  return (
    <>
  
      <Swiper
        style={{
          "--swiper-navigation-color": "#fff",
          "--swiper-pagination-color": "#fff",
        }}
        loop={true}
        spaceBetween={10}
        navigation={true}
        thumbs={{ swiper: thumbsSwiper }}
        modules={[FreeMode, Navigation, Thumbs]}
        className="mySwiper2"
      >
          {/* I want to render each image from data array to each SwiperSlide  */}
        <SwiperSlide>
          <img src={thisProduct.image} />
        </SwiperSlide>
       
      </Swiper>
      <Swiper
        onSwiper={setThumbsSwiper}
        spaceBetween={5}
        slidesPerView="4"
        freeMode={true}
        watchSlidesProgress={true}
        allowTouchMove={false}
        modules={[FreeMode, Navigation, Thumbs]}
        className="mySwiper"
      >
        {/* Same here - it's a thumbnail images */}
        <SwiperSlide>
          <img src={thisProduct.image} />
        </SwiperSlide>

      </Swiper>
    </>
  );
};

export default CarProductDetails;

I want to render each image from data img array as a new SwiperSlide

The solution i found is to write down SwiperSlide for each image and put index in it.

 <SwiperSlide>
          <img src={thisProduct.image[0]} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={thisProduct.image[1]} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={thisProduct.image[2]} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={thisProduct.image[3]} />
        </SwiperSlide>

It actually works but what if i have different amount of images in my data file for each object (obj1 - 5 images, obj2 - 6 images?

What solution is the best for this problem?

CodePudding user response：

I guess you can do as below, map over thisProduct and construct the SwiperSlide's as

<Swiper
  onSwiper={setThumbsSwiper}
  spaceBetween={5}
  slidesPerView="4"
  freeMode={true}
  watchSlidesProgress={true}
  allowTouchMove={false}
  modules={[FreeMode, Navigation, Thumbs]}
  className="mySwiper"
>
  {thisProduct.map((product) => (
    <SwiperSlide>
      <img src={product} />
    </SwiperSlide>
  ))}
</Swiper>;

Note: add a unique key prop to <SwiperSlide> inside the map

CodePudding user response：

You can do it with .map function. It loops through you array and returns an array as a result.

And also it's important to know that when you're returning your UI elements, you should specify a unique key for each element in order to tell react which elements are changed and some more things which you can read here.

So hope it helps:

<Swiper
  style={{
    "--swiper-navigation-color": "#fff",
    "--swiper-pagination-color": "#fff",
  }}
  loop={true}
  spaceBetween={10}
  navigation={true}
  thumbs={{ swiper: thumbsSwiper }}
  modules={[FreeMode, Navigation, Thumbs]}
  className="mySwiper2"
>
  {
    thisProduct.image.map((image, _index) => (
      <SwiperSlide key={_index}>
        <img src={image} />
      </SwiperSlide>  
    ))
  } 
</Swiper>

And just as a suggestion, give all your ids the same type not one string and one number.