Changing slides using buttons above swiper

Hi there, I’m new to Ionic React.

I’m trying to change slides using buttons that are placed above Swiper onClick:

const Tab: React.FC = () => {
  const swiper = useSwiper();

  return (
    <IonPage>
        <IonItem class="labels">
          <IonButton onClick={() => swiper.slideNext() }>
            <IonIcon  icon={chatbubbles} color="primary" />
            <IonLabel> Chat</IonLabel>
          </IonButton>
        </IonItem>
        <Swiper className="mySwiper"
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log('slide change')}
        >
          <SwiperSlide>Chat</SwiperSlide>
          <SwiperSlide>Stories</SwiperSlide>
          <SwiperSlide>Topics</SwiperSlide>
          <SwiperSlide>Private</SwiperSlide>
        </Swiper>
    </IonPage>
  );
};

Since Swiper is not initialized before the button, how do I pass swiper to onClick? E.g.

Uncaught TypeError: Cannot read properties of null (reading 'slideNext')

Thanks!

9 posts - 3 participants

Read full topic