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          lt select defaultValue  selectedOptionId  gt           option id map id   gt           lt option key  id  value  id  gt  options id  name  lt  option gt                    lt  select gt                  Problem is that I don t know the selectedOptionId as the selected option could be any option  How would I find the defaultValue

User · Answer

In an instance where you want to set a placeholder and not have a default value be selected, you can use this option.

      <select defaultValue={'DEFAULT'} >
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>

Here the user is forced to pick an option!

EDIT

If this is a controlled component

In this case unfortunately you will have to use both defaultValue and value violating React a bit. This is because react by semantics does not allow setting a disabled value as active.

 function TheSelectComponent(props){
     let currentValue = props.curentValue || "DEFAULT";
     return(
      <select value={currentValue} defaultValue={'DEFAULT'} onChange={props.onChange}>
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>
    )
}

User · Answer

Thank you all for this thread   My colleague and I just discovered that the default value property is a Constant  not a Variable   In other React forms I ve built  the default value for a Select was preset in an associated Context   So the first time the Select was rendered  default value was set to the correct value   But in my latest React form  a small modal   I m passing the values for the form as props and then using a useEffect to populate the associated Context   So the FIRST time the Select is rendered  default value is set to null   Then when the Context is populated and the Select is supposed to be re-rendered  default value cannot be changed and thus the initial default value is not set   The solution was ultimately simple  Use the value property instead   But figuring out why default value didn t work like it did with my other forms took some time   I m posting this to help others in the community

User · Answer

Use defaultValue and onChange like this const  myValue  setMyValue    useState        lt select onChange   e    gt  setMyValue e target value   defaultValue  props myprop  gt                               lt option gt Option 1 lt  option gt          lt option gt Option 2 lt  option gt          lt option gt Option 3 lt  option gt    lt  select gt

User · Answer

With Hooks and useState Use defaultValue to select the default value      const statusOptions               value  1  label   Publish               value  0  label   Unpublish               const  statusValue  setStatusValue    useState          const handleStatusChange   e   gt            setStatusValue e value          return   lt  gt   lt Select options  statusOptions       defaultValue     value  published  label  published    1    Publish     Unpublish           onChange  handleStatusChange       value  statusOptions find obj   gt  obj value     statusValue   required   gt   lt   gt

User · Answer

What you could do is have the selected attribute on the  lt select gt  tag be an attribute of this state that you set in the constructor  That way  the initial value you set  the default  and when the dropdown changes you need to change your state   constructor      this state         selectedId  selectedOptionId        dropdownChanged e     this setState  selectedId  e target value       render      return       lt select value  this selectedId  onChange  this dropdownChanged bind this   gt         option id map id   gt           lt option key  id  value  id  gt  options id  name  lt  option gt                lt  select gt

User · Answer

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

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

Examples related to reactjs

Examples related to select

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

Examples related to reactjs

Examples related to select

Examples related to dropdown