はじめに

Storybookでmapを利用したコンポーネントを追加したのでまとめます
今後も何度も利用しそうな気がしています

問題

以下のようなセレクトボックスを作成しました

SelectBox.tsx

      <Select
        placeholder="選択してください"
        onChange={(e) => handleAddrTypeChange(e)}
      >
        {collection.map((item, index) => (
          <option key={index} value={index + 1}>
            {item}
          </option>
        ))}
      </Select>

ここでは配列を受け取ってセレクトボックスの選択肢にすることができます
これをStoryBookで選択肢を設定できるように(配列の内容を変更できるように)したかったです

解決方法

以下のようにargsを渡すとうまくできました(collection)

SelectBox.stories.tsx

export default {
  title: "atoms/SelectBox",
  component: SelectBox,
  args: {
    label: "ラベル",
    collection: [["選択肢1"], ["選択肢2"]],
  },
};

配列の内容を変えるときは以下のようにStoryBook上で追加ができます

おわりに

書き方が独特な感じがしますがうまくいってよかったです

参考