Swiper-id-react + Nextjs issue with slide component rendering

Hi guys, this is my issue, if i use swiper hardcoding Slide divs inside Swiper component all works fine, but i need to use <Slide /> component and loop datas for display it, in this case the swiper component display content but don’t initialize slides so the swiper doesn’t work. here my code for swiper component and Slide component.

Next 9.3.1 and react-id-swiper 3.0.0

any ideas?

// swiper component
import Swiper from 'react-id-swiper';
import Slide from "../../components/Slide/Slide";

import { useEffect, useState, useCallback } from 'react';

const SimpleSwiper = () => {

      const [swiper, setSwiper] = useState(null);

      const goNext = () => {
        
        if (swiper !== null) {
          swiper.slideNext();
        }
      };
     
      const goPrev = () => {
        if (swiper !== null) {
          swiper.slidePrev();
        }
      };

      const items = [
        {
          content: "Slide1",
          idx: 1
        },
        {
          content: "Slide2",
          idx: 2
        },
        {
          content: "Slide3",
          idx: 3
        }
        ,
        {
          content: "Slide4",
          idx: 4
        }
        ,
        {
          content: "Slide5",
          idx: 5
        }
        ,
        {
          content: "Slide6",
          idx: 6
        }
      ];

      const renderItem = useCallback(
        ({ idx, content }) => (
          <Slide content={content} key={`slide_${idx}`} />
        ),[]);


        useEffect(() => {
          
          if (swiper !== null){
            console.log(swiper);
            setTimeout(() => {
              swiper.update();
            }, 2000)
          }

          return function cleanup(){
            if (swiper !== null){
              console.log('Destroy', swiper);
              swiper.destroy();
            }
          }
        }, [swiper])
          
 
    // Add eventlisteners for swiper after initializing

    const params = {
      slidesPerView: 3,
      centeredSlides: true,
      spaceBetween: 30,
      loop: true,
      getSwiper: setSwiper
    }

    const slides = items.map(renderItem);
//
    return (
      <>
      <Swiper {...params}>
        {slides}
      </Swiper>
      <button onClick={goPrev}>Prev</button>
      <button onClick={goNext}>Next</button>
      </>
    )
  };
 
export default SimpleSwiper;

//slide component
import style from "./Slide.module.scss";
import { useEffect, useState } from "react";

const Slide = ({ content }) => {
  const onClick = () => {
    alert("clicked")
  }
return <div onClick={onClick}>{content}</div>
}

export default Slide;

[ljhyeok]

@davemin @motrdevua sorry, I solve this problem.

In my case, just need withRouter. I wrapped page component using withRouter of nextjs function. like this…

import React from 'react';
import {withRouter} from 'next/router';

const Page = () => {
  return <div><Swiper/></div>
}

export default withRouter(Page);

then, swiper do normally. In my case, not a react-id-swiper problem…

[motrdevua]

@davemin one thing helped me with the same problem. Just add observer: true, to params object