React-id-swiper: Mapped Data in Swiper not rendering correctly.

[trevans24]

react-id-swiper: ^3.0.0
swiper: ^5.3.6

When mapping data to the swiper component, as I have done in previous versions, the swiper renders all items ignoring the slidesPerView, centeredSlides parameters set. Here are my params:

const params = {
    containerClass: 'testimony-carousel',
    loop: true,
    lazy: true,
    rebuildOnUpdate: true,
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true,
      clickable: true
    },
    centeredSlides: true,
    slidesPerView: 1
  }

inside the component it is set like this:

<Swiper {...params}>
      {
        data.testimonies.map((data, i) => (
          <Testimony key={i} data={data} />
        ))
      }
 </Swiper>

The styling has been imported as well, still just rendering all slides inside the swiper container

[alekslario]

Might be Duplicate of #188

[mbretter]

I encountered exactly the same issue, when using map() the console shows:

Children should be react element or an array of react element!!

when passing the elements directly as children, the Swiper works

[elias-garcia]

I had the same problem @trevans24. Having a look at the Swiper Docs, I've figured out that they are wrapping each slide in a div with a class named swiper-slide. So this code works as expected:

<Swiper {...params}>
  {edges.map(({ node: review }, index) => (
    <div className="swiper-slide" key={index}>
      <Review
        authorName={review.author.name}
        authorImage={review.author.image}
        rating={review.rating}
        comments={review.comments}
      />
    </div>
  ))}
</Swiper>

[dottodot]

There seems to be an issue in 3.0.0 as when using a map, getSwiper isn't returning an instance but in 2.4.0 this is not a problem.

[kidjp85]

For now, when you render map React Element, let make sure you have swiper-slide class name. I will try to fix this issue in next release.

[fahad-zakir]

I had the same problem @trevans24. Having a look at the Swiper Docs, I've figured out that they are wrapping each slide in a div with a class named swiper-slide. So this code works as expected:

<Swiper {...params}>
  {edges.map(({ node: review }, index) => (
    <div className="swiper-slide" key={index}>
      <Review
        authorName={review.author.name}
        authorImage={review.author.image}
        rating={review.rating}
        comments={review.comments}
      />
    </div>
  ))}
</Swiper>

Thank you! All I needed was that div