HubSpot CMS React × useState｜動かない原因とisland構成での対応【Day3】

export const Component = () => {
  const [index, setIndex] = useState(0);
  const phrases = ['Reactは楽しい！', '状態がすべてを変える', 'useStateマスターへの道'];

  return (
    <div>
      <p>{phrases[index]}</p>
      <button onClick={() => setIndex((i) => (i + 1) % phrases.length)}>次へ</button>
    </div>
  );
};

// Islandとして切り出したコンポーネントを読み込むためのimport
import { Island } from '@hubspot/cms-components';

// islandファイルのパスに?islandをつけてインポート（ここがポイント！）
import ChangePhraseIsland from '../../islands/ChangePhraseIsland.jsx?island';

// HubSpot用のフィールド定義を読み込む
import { ModuleFields, TextField } from '@hubspot/cms-components/fields';

// モジュールのメインコンポーネント（HubSpotがこの関数を実行）
export function Component({ fieldValues }) {
  // ページエディターで設定されたフィールドの値を受け取る（propsとして）
  const { phrase1, phrase2, phrase3 } = fieldValues;

  // islandコンポーネントを表示し、propsとしてフレーズを渡す
  return (
    <Island
      module={ChangePhraseIsland} // island側のReactコンポーネントを指定
      phrase1={phrase1} // 1つ目のフレーズを渡す
      phrase2={phrase2} // 2つ目のフレーズを渡す
      phrase3={phrase3} // 3つ目のフレーズを渡す
    />
  );
}

// モジュールエディターで表示される入力フィールドを定義
export const fields = (
  <ModuleFields>
    <TextField name="phrase1" label="フレーズ①" default="Reactは楽しい！" />
    <TextField name="phrase2" label="フレーズ②" default="状態がすべてを変える" />
    <TextField name="phrase3" label="フレーズ③" default="useStateマスターへの道" />
  </ModuleFields>
);

// このモジュールの名前（エディター上に表示される）
export const meta = {
  label: '03_クリックで言葉を切り替え',
};

// ReactのuseStateフックを使うためにインポート
import React, { useState } from 'react';

// propsとして受け取ったフレーズ3つを元に、表示を切り替えるコンポーネント
export default function ChangePhraseIsland({ phrase1, phrase2, phrase3 }) {
  // 受け取ったフレーズ3つを1つの配列にまとめる
  const phrases = [phrase1, phrase2, phrase3];

  // 現在表示中のフレーズのインデックスを状態として管理（初期値は0番目）
  const [index, setIndex] = useState(0);

  return (
    // 中央寄せ＆余白のある表示エリア
    <div style={{ textAlign: 'center', padding: '1rem' }}>
      {/* 現在のインデックスに対応するフレーズを太字＆大きめで表示 */}
      <p style={{ fontSize: '1.25rem', fontWeight: 'bold' }}>
        {phrases[index]}
      </p>
      {/* ボタンをクリックすると次のインデックスに切り替わる（ループ） */}
      <button onClick={() => setIndex((i) => (i + 1) % phrases.length)}>
        次のフレーズ ▶︎
      </button>
    </div>
  );
}