Default value for React Boostrap Option

Question

Im trying to set a value / placeholder for Form.Control but nothing works.

<Form.Row>
           <Form.Label>Select Operator:</Form.Label>
           <Form.Control as="select" value="" name="operator" onChange={this.handleChange} disabled={shouldDisable}>
           {
              operators.map(operator => {
                 return <option key={operator}>{operator}</option>
               })
         }
         </Form.Control>
 </Form.Row>

I want that the Default value will be Choose Operator... which cannot be selected (not trigger onChange) add value, defaultValue, placeholder didnt work

Answer 1

Reading React-Bootstrap docs there is no such possibility for that. My suggestion is to create a first option where its value is an empty string ''. As well I would suggest to set the value property on Form.Control to follow React guidelines to have a controlled state:

<Form.Row>
    <Form.Label>Select Operator:</Form.Label>
    <Form.Control as="select" value={this.state.selectedOperator} name="operator" onChange={this.handleChange} disabled={shouldDisable}>
      <option key={'initial'} value="">Choose Operator...</option>
      {
        operators.map(operator => {
            return <option key={operator} value={operator}>{operator}</option>
          })
      }
    </Form.Control>
</Form.Row>