title: option disabled selected not set as default value in React js dropdown
body: <p>In the dropdown below, why is <code>Select City</code> not appearing in the dropdown as the default selection on page load ? Instead, <code>City1</code> appears as the default selected option.</p>
  
  <p>I have the options for default coded as :</p>
  
  <pre><code>  &lt;option value="" disabled selected&gt;
      Select City
    &lt;/option&gt;
  </code></pre>
  
  <p>The options are coded in another js file as below:</p>
  
  <pre><code> import React from 'react'
  
  const cityoptions = [
    { value: '1', name: 'City1' },
    { value: '2', name: 'City2' },
    { value: '3', name: 'City3' },
  ....
  </code></pre>
  
  <p>The following is the component for dropdown.</p>
  
  <pre><code>import React from 'react'
  import PropTypes from 'prop-types'
  import Select from '../others/input/select'
  import cityOptions from './city-options'
  
  const InputCities = ({ value, change }) =&gt; (
    &lt;div className="edit_caste_div"&gt;
      &lt;Select
        placeholder="Select option"
        value={value}
        valueChange={e =&gt; change('city', e)}
        className="edit_city my2"
      &gt;
        &lt;option value="" disabled selected&gt;
          Select City
        &lt;/option&gt;
        {cityOptions.map((e, key) =&gt; {
         return &lt;option key={key} value={e.value}&gt;{e.name}&lt;/option&gt;
         })}
      &lt;/Select&gt;
    &lt;/div&gt;
  )
  
  InputCities.propTypes = {
    value: PropTypes.string.isRequired,
    change: PropTypes.func.isRequired,
  }
  </code></pre>