Использование перечислений в React select

Question

Я хочу показать раскрывающийся список в React, используя следующее перечисление. Идея состоит в том, чтобы не использовать случайные строки в качестве ключей в моем <select>. Ключи должны быть ограничены до Stooges.larry, Stooges.curly и Stooges.moe:

const Stooges = {
  larry: "Larry Fine",
  curly: "Curly Howard",
  moe: "Moe Howard"
};

Вот код для моего выбора, который отлично работает:

<select value={stooge} onChange={handleChange}>
  {Object.keys(Stooges).map(key => (
    <option key={key} value={key}>
      {Stooges[key]}
    </option>
  ))}
</select>

Проблема возникает, когда я пытаюсь установить начальное значение раскрывающегося списка - я должен использовать жестко закодированный ключ:

const [stooge, setStooge] = React.useState('larry');

Я могу немного смягчить это, выбрав первый ключ:

const keys = Object.keys(Stooges);
const [stooge, setStooge] = React.useState(keys[0]);

Однако, это все еще не так. Я не могу сказать от key[0], кого я выбираю.

Есть ли лучший способ справиться с перечислениями в этом случае использования? Я пробовал перечисления строк в TypeScript, но они имеют ту же проблему:

enum Stooges {
  larry = "Larry Fine",
  curly = "Curly Howard",
  moe = "Moe Howard"
}

Пожалуйста, смотрите мой CodeSandbox здесь .

Answer 1

Из-за отсутствия лучшего решения я выбрал следующий подход.По крайней мере, я могу выбрать правильное перечисление по имени: Stooges.larry.id:

const Stooges = {
  larry: {
    id: "larry",
    name: "Larry Fine"
  },
  curly: {
    id: "curly",
    name: "Curly Howard"
  },
  moe: {
    id: "moe",
    name: "Moe Howard"
  }
};

function App() {
  const [stooge, setStooge] = React.useState(Stooges.larry.id);

  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setStooge(event.target.value);
  };

  return (
    <div className="App">
      <select value={stooge} onChange={handleChange}>
        {Object.keys(Stooges).map(key => (
          <option key={key} value={key}>
            {Stooges[key].name}
          </option>
        ))}
      </select>
    </div>
  );
}

Вот новый CodeSandbox: https://codesandbox.io/embed/wqj2q94o2k