setting default-value in react select dropdown

Question

I am trying to set a default value in my select tag so that on every onChange event I can call an API which is my requirement.

I searched online on how to set defaultvalue for select tag, people suggested to use defaultValue attribute which did not work for me.

    let serviceProviderLocationNames = this.props.serviceProviderLocationName.map((location, key) => {
        return <option key={key} value={location.SERVICE_PROVIDER_LOCATION_ID}>{location.DESCRIPTION}</option>
    });

<select
  defaultValue = {{ label: "Select", value: 0}}
  name="serviceProviderLocationDropDown"
  onChange={this.updateServiceProviderLocationId}
>
  {serviceProviderLocationNames}
</select>

I expected to see a "select" value as default and others to be the values that I got from an API, but I couldn't see the "select"

{serviceProviderLocationNames} This is how I am trying to render the dropdown on UI — Navya Naidu Chamidisetty, Aug 04 '19 at 22:05
Possible duplicate of [How can I set the default value for an HTML — Adriano, Aug 05 '19 at 02:12

score 0 · Answer 1 · answered Aug 04 '19 at 22:48

Try using the defaultValue parameter.

 <Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

score 0 · Answer 2 · answered Aug 05 '19 at 02:36

To see Select by default, you need to add an option before your original option as,

<select
  value={this.state.selectedValue} //Add the selected value here, may be from state. For example `this.state.selectedValue` you can change the name whatever you have
  name="serviceProviderLocationDropDown"
  onChange={this.updateServiceProviderLocationId}
>
  <option>Select</option>   //By default selected
  {serviceProviderLocationNames}
</select>

onChange of your select you have updateServiceProviderLocationId function, and you might set selected value in state, you need to write that in value prop above so that it will become a controlled component.

Demo

Adding an option tag worked for me. :-) Thank you so much. – Navya Naidu Chamidisetty Aug 05 '19 at 04:06 — Navya Naidu Chamidisetty, Aug 05 '19 at 04:06

score -1 · Answer 3 · answered Aug 05 '19 at 05:38

I think you need to brush up html element basics here. So to select value in dropdown by default you need to add selected to html tag and that should take care of default selected item.

So you need to add login to select the element in the option and while change you should be able to get default value

let serviceProviderLocationNames = this.props.serviceProviderLocationName.map((location, key) => {
  return <option 
    key={key} 
    value={location.SERVICE_PROVIDER_LOCATION_ID} 
    selected={key=== PUT_INDEX_TO_BE_DEFAULT_SELECTED}
  >
    {location.DESCRIPTION}
  </option>
});

setting default-value in react select dropdown

3 Answers3