余剰演算（モジュロ演算）を使用した配列の循環（クリックの度に画像を切り替える）

余剰演算（モジュロ演算）とは？

配列などのインデックス番号を指定したとき、配列の数を超える整数を指定されても、再び「0」に戻り、配列を循環するように番号を取得できる。

参考コード

以下、Reactのコンポーネント。
画像をクリックするたびに、配列内の画像が切り替わる処理を実装している。

const TestComponent = () => {
  const imgArray = [imgUrl01, imgUrl02, imgUrl03, imgUrl04, imgUrl05]
  const [current, setCurrent] = useState(0)
  
  const onChangeImage = () => {
	  setCurrent((prev) => (prev + 1) % imgArray.length)
  }
  
  return (
		 <div>
			 <img src={imgArray[current]} />
		 </div>
  )
}

余剰演算（モジュロ演算）は、ある数を別の数で割った余りを返す演算。
今回のケースでは、imgArray.lengthで配列の長さ（ここでは5）を使用する。

クリックされるたびにonChangeImage関数が実行され、currentの状態が更新される。

setCurrent((prev) => (prev + 1) % imgArray.length)

// set関数内で行われている計算
// (0 + 1) % 5 = 1 % 5 = 1 … current = 1
// (1 + 1) % 5 = 2 % 5 = 2 … current = 2
// …
// (4 + 1) % 5 = 5 % 5 = 0 … current = 0（配列の最初に戻る）

参考記事