CODEWITHSUNDEEP
reactjs
AZSWQ
AZSWQ

Reputation: 319

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

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,
}

Upvotes: 3

Views: 5183

Answers (1)

SAMA BALA
SAMA BALA

Reputation: 71

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>

Upvotes: 1

Related Questions