title: Sending number instead of string from Select in React component
body: <p>I have a <strong>"controlled"</strong> React component for a very simple drop down that looks like this:</p>
  
  <pre><code>const MyDropDown = ({field, handleChange}) =&gt; {
  
     return(
  
        &lt;select name="myField" value={field} onChange={handleChange}&gt;
           &lt;option value="1"&gt;Apples&lt;/option&gt;
           &lt;option value="2"&gt;Oranges&lt;option&gt;
           &lt;option value="3"&gt;Bananas&lt;/option&gt;
        &lt;select&gt;
     );
  }
  
  MyDropDown.propTypes = {
     field: PropTypes.number.isRequired,
     handleChange: PropTypes.func.isRequired
  }
  
  export default MyDropDown;
  </code></pre>
  
  <p>Initially, I set the value of the <code>field</code> to <code>0</code> in my reducer. This is the right thing to do because the value will always be a number. The problem I'm having is this:</p>
  
  <p>Initially, everything is fine but when I make a selection, I get a warning saying an invalid prop of type string is supplied and it was expecting a number.</p>
  
  <p>How do I make sure the values in the options are numbers and not strings?</p>
  
  <p>BTW, I tried not using quotes for option values but React doesn't seem to like it i.e. <code>&lt;option value=1&gt;Apples&lt;/option&gt;</code></p>