Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>

Question

SCENARIO A user has a dropdown and he selects an option. I want to display that dropdown and make that option a default value which was selected by that user last time.

I am using selected attribute on option but React generates a warning asking me to use default value on select.

For e.g.

render: function() {
    let option_id = [0, 1];
    let options = [{name: 'a'}, {name: 'b'}];
    let selectedOptionId = 0

    return (
      <select defaultValue={selectedOptionId}>
        {option_id.map(id =>
        <option key={id} value={id}>{options[id].name}</option>
        )}
      </select>
    )
  }
});

Problem is that I don't know the selectedOptionId as the selected option could be any option. How would I find the defaultValue ?

Answer 1

React uses value instead of selected for consistency across the form components. You can use defaultValue to set an initial value. If you're controlling the value, you should set value as well. If not, do not set value and instead handle the onChange event to react to user action.

Note that value and defaultValue should match the value of the option.