option disabled selected not set as default value in React js dropdown

Question

In the dropdown below, why is Select City not appearing in the dropdown as the default selection on page load ? Instead, City1 appears as the default selected option.

I have the options for default coded as :

  <option value="" disabled selected>
    Select City
  </option>

The options are coded in another js file as below:

 import React from 'react'

const cityoptions = [
  { value: '1', name: 'City1' },
  { value: '2', name: 'City2' },
  { value: '3', name: 'City3' },
....

The following is the component for dropdown.

import React from 'react'
import PropTypes from 'prop-types'
import Select from '../others/input/select'
import cityOptions from './city-options'

const InputCities = ({ value, change }) => (
  <div className="edit_caste_div">
    <Select
      placeholder="Select option"
      value={value}
      valueChange={e => change('city', e)}
      className="edit_city my2"
    >
      <option value="" disabled selected>
        Select City
      </option>
      {cityOptions.map((e, key) => {
       return <option key={key} value={e.value}>{e.name}</option>
       })}
    </Select>
  </div>
)

InputCities.propTypes = {
  value: PropTypes.string.isRequired,
  change: PropTypes.func.isRequired,
}

maybe because it's disabled, here is an example in pure html https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_option_disabled — Olivier Boissé, Sep 11 '18 at 00:20
@OlivierBoissé - makes sense. So how can I show a `Select City` option that is disabled? This is just to prompt them to make a selection but value is meaningless so do not want to allow them to select it. Its basically a greyed out option. — AZSWQ, Sep 11 '18 at 00:24
Actually your example should work because you add the `selected` attribute, here is a similar post https://stackoverflow.com/a/5859221/5521607 maybe this doesn't work because of this `value={value}` on your select element, I supposed the default value is undefined, try to declare your component using a default value : `const InputCities = ({ value = "", change })` — Olivier Boissé, Sep 11 '18 at 00:30
I created a stackblitz and it's working perfectly using your code https://stackblitz.com/edit/react-rpgzdf How do you declare `` in your code ? with a value probably.... — Olivier Boissé, Sep 11 '18 at 00:35
Your comments helped me find the answer. First I needed to assign value of 0 instead of "". Not sure if thats needed but that is when it worked. Cities were populated based on State selection. So onChangeState (when a new state is selected), I added code to reset city to "0" - `changeState = (what, e) => { this.setState({ [what]: e.target.value }) this.setState({ city: '0' }) }` — AZSWQ, Sep 11 '18 at 01:01

score 1 · Answer 1 · answered Oct 01 '19 at 16:57

You should add a defaultValue attribute to select and set it to the disabled value

<Select
      defaultValue="Select City"
      valueChange={e => change('city', e)}
      className="edit_city my2"
    >
      <option value="Select City" disabled>
        Select City
      </option>
      {cityOptions.map((e, key) => {
       return <option key={key} value={e.value}>{e.name}</option>
       })}
    </Select>

option disabled selected not set as default value in React js dropdown

1 Answers1