CODEWITHSUNDEEP
reactjsapijsxswiper.js
Tomiwa
Tomiwa

Reputation: 69

How do I render react dynamic components in slides with swiper?

I'm displaying data gotten from an API on the interface of my website using map method.

//mapping over search result data and passing it to search component as props
 const moveEl = searchData.map(movie =>(
      <Search id={movie.id}  name={movie.name} image={movie.poster_path} summary={movie.overview}/>
    )
---------
<div>
  {moveEl}
</div>

I want to render this data as slides but if I can't hardcode them into swiper, what should I do instead please?

      <Swiper watchSlidesProgress={true} slidesPerView={7} className="mySwiper">
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>

Upvotes: 0

Views: 1035

Answers (1)

mythosil
mythosil

Reputation: 423

You can use map method inside Swiper component.

<Swiper watchSlidesProgress={true} slidesPerView={7} className="mySwiper">
  {searchData.map(movie => (
    <SwiperSlide key={movie.id}>
      <Search id={movie.id}  name={movie.name} image={movie.poster_path} summary={movie.overview}/>
    </SwiperSlide>
  )}
</Swiper>

Upvotes: 1

Related Questions