React-Selectを用いて、選択した値を指定の要素に表示させる

Question

実現したいこと

React-Selectで作成したセレクト要素にチェックを入れた内容を、指定の要素に表示させる。

前提

React,TypeScriptで「React-Select」モジュールを使用しております。
チェックボックスにチェックを入れた時、
チェックに紐づくlabelを、指定の要素に表示させたいと思っています。

発生している問題・エラーメッセージ

TypeError: Cannot read properties of undefined (reading 'value')

該当のソースコード

import React,{ useState } from 'react';
import Select,{ OptionProps } from 'react-select';

interface Option {
  value: number;
  label: string;
}

const options: Option[] = [
  {value: 1, label: "aaa"},
  {value: 2, label: "bbb"},
  {value: 3, label: "ccc"},
  {value: 4, label: "ddd"},
  {value: 5, label: "eee"},
]

function MyOption(props: OptionProps<Option>){
  return(
    <div>
      <input
        type="checkbox"
        id={props.data.value.toString()}
        onChange={(e) => props.selectOption(props.data)}
        checked={props.isSelected}
      />
      <label
        htmlFor={props.data.value.toString()}
      >
        {props.data.label}
      </label>
    </div>
  )
}

function DropDwon(){
  const [value, setValue] = useState('default');

// 以下の記述でエラーが発生してしまいます
  const SelectChange = (event:any) => {
    setValue(event.target.value);
   }

  return(
    <div className="dropdown__box">
      <Select
        options={options}
        isMulti={true}
        components={{Option: MyOption}}
        hideSelectedOptions={false}
        closeMenuOnSelect={false}
        onChange={
          SelectChange
        }
      />

      <p>{value}</p>
    </div>
  )
}

export default DropDwon;

試したこと

any型に問題があるのかと思い、「event: React.ChangeEvent<HTMLSelectElement>」という型を使用しましたが、React-Selectで生成される<Select />とは互換性がないようで弾かれてしまいました…。

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

node:v18.12.1
npm:8.19.2

Comments

[hoshi-takanori]

onChange の型はここに書いてあるのでは…。
https://react-select.com/typescript#onchange

[vio]

ご回答ありがとうございます。

URLを参考に変更してみましたが、下記のエラーが起きてしまいました。

```
型 '(option: Option | null, actionMeta: ActionMeta<Option>) => void' を型 '(newValue: MultiValue<Option>, actionMeta: ActionMeta<Option>) => void' に割り当てることはできません。
パラメーター 'option' および 'newValue' は型に互換性がありません。
型 'readonly Option[]' には 型 'Option' からの次のプロパティがありません: value, label
```

```typescript
import Select,{ OptionProps,ActionMeta } from 'react-select';

const SelectChange = (option: Option | null, actionMeta: ActionMeta<Option>) => {
setValue(value);
}

<Select
options={options}
isMulti={true}
components={{Option: MyOption}}
hideSelectedOptions={false}
closeMenuOnSelect={false}
onChange={ //この行でエラーになります
SelectChange
}
/>

```

newValueとreadonly Option[]とは何を指しているのでしょうか…。
エラーがどういう意味か読み解けず、どのように考えればいいかご教示いただけますと幸いです…。

[hoshi-takanori]

onChange の最初の引数の型は isMulti の値で変わり、isMulti が false (つまり一つしか選べない) 場合は Option または null だけど、isMulti が true の場合は複数選択なので Option の配列ってことでしょう。
option: や newValue: は引数名なので違ってても問題なくて、readonly は onChange の中で配列を変更しちゃ駄目 (React だから当然だけど) ってことかな。

Answer 1

react-selectのバージョン5.7.2で検証しました。

SelectChangeが受け取るeventの戻り値は配列のようです。そのため、例えば選択された最初の要素をセットする場合は、以下のようなコードになります。

  const SelectChange = (event) => {
    // console.log(event)
    setValue(event[0].value);
  }

console.logで一度eventの値を確認してみると良いかなと思います。余談ですが、TypeScriptの型情報は実行時の値に影響を及ぼさないため、今回は特に型情報の更新は不要かと思います（余裕があれば、型情報も修正してみると良さそうです！）。

選択された複数の値を保存 / 表示したい場合などは、要件にもよりますが、eventの配列の要素内のvalueを文字列として連結する、const [value, setValue] = useState('default');の箇所の初期値を配列として扱う、などの方法がありそうです。