CODEWITHSUNDEEP
javascripthtmlreactjsecmascript-6react-hooks
dragos.pavel
dragos.pavel

Reputation: 98

React warning when selecting an option from a drop down list

I have the following Select statement into a React component

<Select
   id="type"
   className={classes.formComponent}
   onChange={ e => handleDropDownListEvent(e) }
   required
   defaultValue="DEFAULT"
   >
   <option value="Opt1">Opt1</option>
   <option value="Opt2">Opt2</option>
   <option value="Opt3">
      Opt3
   </option>
   <option defaultValue="DEFAULT" disabled>
      Choose an event
   </option>
</Select>

And when I'm trying to select an option in UI from this drop down list I'm getting the following warning in chrome console:

index.js:1375 Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
    in option (at HealthKitForm.tsx:134)
    in ul (created by ForwardRef(List))
    in ForwardRef(List) (created by WithStyles(ForwardRef(List)))
    in WithStyles(ForwardRef(List)) (created by ForwardRef(MenuList))
    in ForwardRef(MenuList) (created by ForwardRef(Menu))
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Transition)
    in Transition (created by ForwardRef(Grow))
    in ForwardRef(Grow) (created by TrapFocus)
    in TrapFocus (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef(Popover))
    in ForwardRef(Popover) (created by WithStyles(ForwardRef(Popover)))
    in WithStyles(ForwardRef(Popover)) (created by ForwardRef(Menu))
    in ForwardRef(Menu) (created by WithStyles(ForwardRef(Menu)))
    in WithStyles(ForwardRef(Menu)) (created by ForwardRef(SelectInput))
    in ForwardRef(SelectInput) (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Input))
    in ForwardRef(Input) (created by WithStyles(ForwardRef(Input)))
    in WithStyles(ForwardRef(Input)) (created by ForwardRef(Select))
    in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (at HealthKitForm.tsx:128)
    in form (at HealthKitForm.tsx:127)
    in div (at HealthKitForm.tsx:125)
    in HealthKitForm (at src/index.tsx:11)
    in SmilerProvider (at src/index.tsx:10)

What I'm doing wrong and how can I solve this warning? Also what kind of event is generated when I'm selecting an option because I need the type of the event on signature of handleDropDownListEvent(event: type???)

Upvotes: 0

Views: 1358

Answers (3)

foyss
foyss

Reputation: 983

I see that your question is answered, but may I recommend an improvement from the code you have provided so far...

With the use of FormControl, InputLabel, and MenuItem from the Material UI library, managing Selects become tremendously easier as well as styling

const optionsArray = [Opt1, Opt2, Opt3, Opt4]

<FormControl> 
   <InputLabel htmlFor="grouped-select" variant='outlined'> 
      SELECT NAME 
   </InputLabel>
   <Select 
      defaultValue="" 
      className={classes.formComponent} 
      onChange={e => handleDropDownListEvent(e)}>
      {optionsArray.map((option, index) =>
         <MenuItem key={index} value={option}>{option}</MenuItem>
      )}                            
   </Select>
</FormControl>

Upvotes: 4

Dennis Vash
Dennis Vash

Reputation: 53964

There is no meaning for defaultValue in option, you should change it to value="DEFAULT":

<Select defaultValue="DEFAULT">
  ...
  // not defaultValue ="DEFAULT"
  <option value="DEFAULT" disabled>
    Choose an event
  </option>
</Select>

Update by checking the documentation you need to use MenuItem not option tag

<Select labelId="label" id="select" value="20">
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</Select>

Upvotes: 1

Tony
Tony

Reputation: 20132

As a error already stated that 

Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>

Which mean you can not use defaultValue on option tag you can only use on select tag. But this is how you can set default value on the option using selected attribute

<select name = "dropdown">
  <option value = "Java">Java</option>
  <option value = "Discrete Mathematics" selected>Discrete Mathematics</option>
  <option value = "Chemistry">Chemistry</option>
</select>

Upvotes: 0

Related Questions