自作Reactアプリでイベントハンドラに設定した関数が動かない。

Question

前提

Reactを用いて現在アプリケーションを開発しています。
ある関数コンポーネントで描画したselectとその子要素であるoptionが変化した際に値を取得しようとしています。
しかしonChangeハンドラやonClickハンドラに関数オブジェクトを渡しても動きません。
エラーメッセージなども出ず困っております。どうかお力添えいただけると幸いです。

実現したいこと

• コンポーネントのハンドラに渡した関数を実行し、値を取得したい
• その取得した値でステートを変更し、任意のデータを抽出したい

該当のソースコード

// 管理するデータをprorileとして定義しexportするファイル
// オブジェクトを格納した配列
const profile = [
  {
    "name": {"en": "test", "ja": "テスト"},
    "job": {"en": "job", "ja": "ジョブ"},
    ...
  },
  {同様のデータ},
  ...
];
export default profile;

// フック
// 配列（上記のデータ）を受け取り、任意のインデックスにあるオブジェクトと、抽出するインデックスを変更する関数を返す
import { useState } from "react";
export default function useSelectCharacter(charaData) {

  const characters = charaData;


  const [selectedCharacter, setCharacter] = useState(characters[0]);

  const pickUpCharacter = index => {
    setCharacter(characters[index]);
    console.log(`select indexNo.${index}`);
  };

  return{
    selectedCharacter,
    pickUpCharacter
  };

}

// 配下コンポーネントを取りまとめる上位コンポーネント
// 配列とカスタムフックをimportし、配下へ引き渡す

import React from "react"
import OperatorSide from "./OperatorSide";
import EnemySide from "./EnemySide";
import profile from "./profile"";
import useSelectCharacter from "./useSelectCharacter";

export default function Root() {

  const operators = operatorProfile;

  const {selectedCharacter, pickUpCharacter} = useSelectCharacter(operators);
  
return (
    <>
      <OperatorSide
        selectedCharacter={selectedCharacter}
        pickUpCharacter={pickUpCharacter}
        profile={operators}
       />
    </>
  );
}

// 上記のコンポーネントから値を受け取り、select要素らを描画するコンポーネントへ引き渡す
// 抽出されたデータにアクセスしたdiv内には反映された

import React from "react";
import Select from "./Select";

export default function OperatorSide({
  profile,
  selectedCharacter,
  pickUpCharacter
}) {

  return(
    <>
      <Select 
　　　profile={profile} 
　　　pickUpCharacter={pickUpCharacter}
　　/>
      <div>
        {selectedCharacter.name.en}
      </div>
      </>
  );
}

// 問題のコンポーネント
// 未加工のデータが配列なので、mapメソッドを用いてselect要素内のoption要素を描画している
// 各option要素のonChangeハンドラにフックの関数を渡すが反応なし

import React, {useState} from "react";

function Select ({
  profile,
  pickUpCharacter
}) {

  return (
    <select>
      {profile.map((ope,i) => (
        <option 
          key={i}
          value={i}
          onChange={(e) => pickUpCharacter(e.target.value)} 
        >
         {ope.name.ja}
      </option>
      ))}
    </select>
  );
};

export default Select;

試したこと

• リレーされてきた関数をそのままハンドラに渡したり、ハンドラに渡した際にアロー関数に包んで渡したりしました。
• テスト用の関数をSelectコンポーネント内で作り引き渡す、渡すハンドラを変える（onClick等）なども試しました。
• アプリ開発にはじめたばかりはイベントで関数が動いたので、一度ビルドしたのが影響しているのかもと思い再度ビルドしました。

補足情報（FW/ツールのバージョンなど）

create-react-appで環境を構築しました。設定は変えておらずデフォルトのままのはずです。
ビルドした際はデフォルトのnpm run buildコマンドをしようしています。
以下パッケージの一覧です。
@testing-library/jest-dom@5.16.4
@testing-library/react@13.3.0
@testing-library/user-event@13.5.0
react-dom@18.2.0
react-scripts@5.0.1
react@18.2.0
└── web-vitals@2.1.4

Answer 1

コンボボックスの内容が変更された場合のイベントでしたら、「option」ではなく「select」のイベントハンドラに設定しなくてはいけません。

return (
    <select
          onChange={(e) => pickUpCharacter(e.target.value)} 
    >
      {profile.map((ope,i) => (
        <option 
          key={i}
          value={i}
        >
         {ope.name.ja}
      </option>
      ))}
    </select>
  );
};

Comments

[ky-]

回答していただきありがとうございます。
selectのイベントハンドラに渡したらしっかり動きました。