React-Selectで詰まった点

React-Select

react-select は、React向けの柔軟でカスタマイズ可能なセレクトボックスコンポーネントです。
標準の select タグでは実現しづらい 検索機能、マルチセレクト、カスタムデザイン などを簡単に実装できるのが特徴です。
下の記事がreact-selectで実装できる機能をわかりやすく説明してくれているので、ぜひ参考にしてみてください。

詰まった点

react-selectは、デフォルトだと以下のように 「optionにはvalueとlabelキーを持ったオブジェクト」 を渡す必要があるということです。

import Select from "react-select";

const options = [
  { value: "japan", label: "Japan" },
  { value: "usa", label: "USA" },
  { value: "france", label: "France" }
];

export default function App() {
  return <Select options={options} />;
}

私はそのことを知らず、ずっとエラーと戦っていました。。。笑

使用したいオブジェクトがvalueとlabelキーを持っていない場合

しかし、optionsのオブジェクトには、実際にはAPIレスポンスから受け取ったデータを使うことが多いと思います。私が実際に使用していた際もそうでした。
私が調べた限りでは、これを解決する方法は２つあります。

①オブジェクトにvalueとlabelキーを追加する

若干力技ですが、元のオブジェクトをスプレッド構文（...）を使って新しいオブジェクトにコピーし、value と label を追加します。(既存のキーを残したい場合)

const users = [
  { id: 1, name: 'ユーザー1'},
  { id: 2, name: 'ユーザー2'},
  { id: 3, name: 'ユーザー3'},
];

const options = users.map(user => ({
  ...user,  // 既存の全てのキーと値を保持
  value: user.id,  // valueキーを追加
  label: user.name // labelキーを追加
}));

②getOptionLabel や getOptionValue を指定する

getOptionLabel と getOptionValue を渡せば任意のキー構成のオブジェクトを使える。

const countries = [
  { code: "jp", name: "Japan" },
  { code: "us", name: "USA" },
  { code: "fr", name: "France" }
];

<Select
  options={countries}
  getOptionLabel={(option) => option.name}
  getOptionValue={(option) => option.code}
/>

2通り試してみたところ、両方とも無事に実装できました。

まとめ

• React-Select は便利だけど、optionsにはデフォルトで value と label が必要

• APIレスポンスをそのまま使いたい場合は

1. value / label を追加して変換する

2. getOptionLabel / getOptionValue を指定する

どちらも実装可能なので、データ構造やユースケースに応じて選択