title: Set selected option by index?
body: <p>In React, how can I set the selected option (of a <code>&lt;select&gt;</code>) via its index (<code>select.selectedIndex</code>), rather than value?</p>
  
  <p>e.g. I'd expect something <em>like</em> this two select option "Two":</p>
  
  <pre><code>const FancySelect = () =&gt; (
      &lt;select selectedIndex={2}&gt;
          &lt;option&gt;Zero&lt;/option&gt;
          &lt;option&gt;One&lt;/option&gt;
          &lt;option&gt;Two&lt;/option&gt;
          &lt;option&gt;Three&lt;/option&gt;
      &lt;/select&gt;
  )
  </code></pre>
  
  <hr>
  
  <p>You guys are still trying to cheat. I said <em>without</em> setting <code>&lt;option value&gt;</code>. Imagine my list of options looks like this:</p>
  
  <pre><code>export const options = [
      {value: Symbol(), label: "Zero"},
      {value: Symbol(), label: "One"},
      {value: Symbol(), label: "Two"},
      {value: Symbol(), label: "Three"},
      {value: Symbol(), label: "Zero"},
  ];
  </code></pre>
  
  <p>Now you <em>can't</em> put <code>options[0].value</code> into the <code>&lt;option value&gt;</code> because it's not a string. You also can't put the <code>label</code> into the value because there's duplicates.</p>
  
  <p>What you <em>can</em> do is find the index of the option with something like</p>
  
  <pre><code>const index = options.findIndex(o =&gt; o.value === currentlySelectedValue);
  </code></pre>
  
  <p>Now I want to use <code>index</code> to set the currently selected option. In vanilla JS, this would be as simple as <code>mySelect.selectedIndex = index</code>.</p>