How to reset react-id-swiper each time event handler is called in React?

Question

I'm using react-id-swiper module in react to load a slider, I have set an onClick event handler on some buttons with different id attributes, each time the user clicks a button an API with a different id is called, the state is updated and therefore the ImageSlider component is loaded and some images are shown in the slider on a modal. The images are shown as expected but the problem is that whenever a new button is clicked new images are loaded but the pagination buttons don't get reset and the number of pagination buttons is fixed to the number of first API call images! So I'm guessing the swiper doesn't get reset.I'm working on how I can reset or destroy swiper before swiper is rendered in the component but I haven't gotten any luck.

So far I've checked mentioned pages but wasn't able to find a solution! react-id-swiper and react-id-swiper npm

This is the ImageSlider component:

import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';

class ImageSlider extends Component {
    render() {
        const params = {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            runCallbacksOnInit: true,
            onInit: (swiper) => {
                this.swiper = swiper
            }
        }
        const slides = this.props.sliderImages;
        let imgSlider = slides.map((slide,index) => 
                <div key={index}><img src={ 'http://172.16.1.74:8000'+ slide.url } key={index} className="img-fluid sliderImg" alt="alt title" /></div>
            );

      return (
        <div>
            <Swiper {...params}>
                { imgSlider }
            </Swiper>
        </div>
      )
    }
}

export default ImageSlider;

A simple straight forward answer is appreciated, Thanks.

Answer 1

I found the solution by adding rebuildOnUpdate: true prop to the params passing to the Swiper. A complete list of props can be found here react-id-swiper original props .