title: Using enumerations in React select
body: <p>I want to show a dropdown in React using the following enumeration. The idea is to prevent using random strings as keys in my <code>&lt;select&gt;</code>. Keys should be constrained to <code>Stooges.larry</code>, <code>Stooges.curly</code> and <code>Stooges.moe</code>: </p>
  
  <pre><code>const Stooges = {
    larry: "Larry Fine",
    curly: "Curly Howard",
    moe: "Moe Howard"
  };
  </code></pre>
  
  <p>Here's the code for my select, which works just fine:</p>
  
  <pre><code>&lt;select value={stooge} onChange={handleChange}&gt;
    {Object.keys(Stooges).map(key =&gt; (
      &lt;option key={key} value={key}&gt;
        {Stooges[key]}
      &lt;/option&gt;
    ))}
  &lt;/select&gt;
  </code></pre>
  
  <p>The problem comes in when I am trying to set the initial value of the dropdown - I have to use a hard coded key:</p>
  
  <pre><code>const [stooge, setStooge] = React.useState('larry');
  </code></pre>
  
  <p>I can soften this a bit by picking the first key:</p>
  
  <pre><code>const keys = Object.keys(Stooges);
  const [stooge, setStooge] = React.useState(keys[0]);
  </code></pre>
  
  <p>However, this still feels wrong. I can't tell from <code>key[0]</code> who am I picking.</p>
  
  <p>Is there a better way to deal with enumerations in this use case? I have tried string enums in TypeScript, but they have the same issue:</p>
  
  <pre><code>enum Stooges {
    larry = "Larry Fine",
    curly = "Curly Howard",
    moe = "Moe Howard"
  }
  </code></pre>
  
  <p>Please see my CodeSandbox <a href="https://codesandbox.io/embed/0yq9n1njpp" rel="noreferrer">here</a>.</p>