ReactでSwiperを使って実装時につまづいたこと

ReactのWebアプリ開発でSwiperを使ったときの話

アプリ内のあるページでボタンを押すとモーダルが表示され、その中で画像のみスライドできる実装でした。また画像をスワイプするとapiを叩き、画像の上下に存在するタイトルや説明が変更される仕様です。
既にコードうろ覚えですが書いていきます...

useStateで値が参照できない(nullのまま)

SwiperのactiveIndexを参照したくて、最初はuseStateでSwiperの状態をセットしておき、そこからactiveIndexを参照しようとしました。

import React, { useState } from 'react';
import useFetchData from "./useFetchData"
import SwiperCore from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

const ModalComponent = () => {
  const [pageData, modalData] = useFetchData();
  const [mySwiper, setMySwiper] = useState(null);

  return (
    <>
    <p>{modalData.title}</p>
    <Swiper
        onSwiper={setMySwiper}
        onSlideChangeTransitionEnd={setMySwiper}>
        {
            pageData.map(data => {
                <SwiperSlide key={data.id}>
                    <img src={data.imgUrl} alt="" />
                </SwiperSlide>
            })
        }
    </Swiper>
    <p>{modalData.description}</p>
    </>
  )
}

上記のようにして mySwiper.activeIndex とすれば現在のアクティブなスライドのnumberが取得できると考えていましたがundefinedと表示されました。そもそもmySwiperは初期値のnullのままでした。ただswiperの引数から情報は参照できたので、以下のやり方で解決しました。

最終的なコード

import React, { useState } from 'react';
import useFetchData from "./useFetchData"
import SwiperCore from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

const ModalComponent = () => {
  const [pageData, modalData] = useFetchData();
  const [activeIndex, setActiveIndex] = useState(0);
  
  const getActiveIndex = (swiper) => {
    setActiveIndex(swiper.activeIndex);
  }

  return (
    <>
    <p>{modalData.title}</p>
    <Swiper
        onSlideChangeTransitionEnd={getActiveIndex}>
        {
            pageData.map(data => {
                <SwiperSlide key={data.id}>
                    <img src={data.imgUrl} alt="" />
                </SwiperSlide>
            })
        }
    </Swiper>
    <p>{modalData.description}</p>
    </>
  )
}

新たにactiveIndexを取得用のステートを作成して、そこにswiperから渡ってきたactiveIndexのnumberを格納します。こうすることで値が参照でき、スライドのトランジションが終わったときにactiveIndexが変更されていることも確認できました。