Cannot read property 'slideNext' of undefined

[zeeshan-m]

The error is thrown on:

            scope.$on("wizard:Next", function() {
                scope.swiper.slideNext(true);
            });

I copied over the sample wizard from here: https://plnkr.co/edit/azYKSAYOMv0pZu8YEWVs and I get the "Cannot read property 'slideNext' of undefined" whenever I hit next in the wizard. ionic.wizard is added as a dependency into the app and ion-wizard.js is loaded. Any idea what's going wrong?

[frey1esm]

Did you resolve this? If so, how?

[jxnx888]

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

  const nexto = () => {
    swiper.slideNext();
  };
  return (
    <div>
      <Swiper
        spaceBetween={50}
        slidesPerView={1}
        onSwiper={(s) => {
          console.log("initialize swiper", s);
          setSwiper(s);
        }}
      >
        <SwiperSlide style={{ height: 100 }}>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
      <button onClick={nexto}>next</button>
    </div>
  );
}

[jxlagbh360]

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

  const nexto = () => {
    swiper.slideNext();
  };
  return (
    <div>
      <Swiper
        spaceBetween={50}
        slidesPerView={1}
        onSwiper={(s) => {
          console.log("initialize swiper", s);
          setSwiper(s);
        }}
      >
        <SwiperSlide style={{ height: 100 }}>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
      <button onClick={nexto}>next</button>
    </div>
  );
}

Thank you for helping me solve the problem