個別に扱うことがないただの選択肢なら数字だけでもいいかなって思った

昔ながら感ある方法

const FOO = 1
const BAR = 2

export const foo_bar_options = {
	[FOO]: "foo text",
	[BAR]: "bar text"
}

選択肢それぞれに名前をつけて数値を対応させる
key-value 形式で数値と表示用ラベルを保持する

foo text のところは日本語だったりで画面に表示する用のテキスト
簡単なツールなどだと選択肢も簡単で英単語で表すのも簡単

だけど特殊な固有名詞とか選択肢を表す言葉が複雑なものになってくると 名前を考えるのも面倒
そもそも一般的な英語にしづらい固有名詞とかは日本語で書けばいいとも思ってるけど 他とのバランスとかで急に日本語を混ぜたくないとかもあって 英語にしたいときもある

こういうので数が多いと嫌になる
思ったのが 選択肢が特別な意味のないただの選択肢で これを選んだ場合に何かがあるとかが無いなら 最初から名前を用意しなければ名前を考える必要はないってこと
全体としてこれが何なのかを表してる foo_bar_options に当たる名前は必要だけど ここはそんなに難しいことがなくて面倒なのは選択肢なのでこれで十分

export const foo_bar_options = {
	1: "foo text",
	2: "bar text",
}

=== "1" は 1 が何かわからないのでしたくないけど それをすることがないなら名前もいらない

React で select を作るときもこういう感じでいい

import { foo_bar_options } from "./constants.js"

const Select = ({ options }) => {
	const opts = Object.entries(options)
	return (
		<select defaultValue={opts[0][0]}>
			{opts.map(([k, v]) => (
				<option key={k} value={k}>{v}</option>
			))}
		</select>
	)
}

const Component = () => {
	return (
		<div>
			<Select options={foo_bar_options} />
		</div>
	)
}