How to check selected option in react js

Question

I'm trying to add selected option in my select box using react js. here is my code

<Field component='select' name='sample'>
  <option value={1}>option1</option>
  <option value={2}>option2</option>
  <option value={3} {... "selected"}>option3</option>
  <option value={4}>option4</option>
  <option value={5}>option5</option>
</Field>

I try already the defaultValue and also adding selected but it doesn't work. Did I miss something about my code?

Answer 1

You can simply use something like this..where the selected value is in the select(value property) react works that way...

<select value={yourSelectedStateValue}>
        <option value={1}>option1</option>
        <option value={2}>option2</option>
        <option value={3}>option3</option>
        <option value={4}>option4</option>
        <option value={5}>option5</option>                            
 </select>

take a look at Link Here

dealing with the statevalue, use the onChange() event...

<select value={yourSelectedStateValue} onChange={this.handleSelectOption.bind(this)}>
        <option value={1}>option1</option>
        <option value={2}>option2</option>
        <option value={3}>option3</option>
        <option value={4}>option4</option>
        <option value={5}>option5</option>                            
 </select>


handleSelectOption(e){
   this.setState({
      yourSelectedStateValue: e.target.value,
   })
}

Answer 2

My solution example is

<Form.Select id='oCompId'>
<option  value="-1">--Please select once item--</option>
{ items.map(item => {
   return item.id === targetId ?
          (<option value={item.id} selected>{item.name}</option>) 
         :
         (<option value={item.id} >{item.name}</option>) 
   }
)}
</Form.Select>

I show a default selection to the user when it first rendered.