title: React bootstrap select dropdown
body: <p>I am using ReactJS with BootStrap and is unable to get dropdown data that I am passing, in the event handler. The html is not built with option lists only input field is coming. </p>
  
  <p>My code looks like:</p>
  
  <pre><code>import  React from 'react';
  import PropTypes from 'prop-types';
  import { FormWithConstraints, FieldFeedback } from 'react-form-with-constraints';
  import { FieldFeedbacks, FormGroup, FormControlLabel, FormControlInput } from 'react-form-with-constraints-bootstrap4';
  
  class Select extends  React.Component{
  
      handleChange(event) {
          //event.target.value
          //do required changes
  
      }
  
      render(){
          return(
                  &lt;FormGroup for={this.props.name}&gt;
                      &lt;FormControlLabel htmlFor={this.props.name} style={styles.lableStyle}&gt;{this.props.label}{this.props.required?&lt;b
                          style={{color: "#2c3d4d"}}&gt;*&lt;/b&gt;:null}&lt;/FormControlLabel&gt;
                      &lt;FormControlInput
                          id={"Source"}
                          label={this.props.label}
                          placeholder="Select Country"
                          type="text"
                          // value={this.props.value}
                          onChange={this.handleChange}
                              // (event)=&gt;{
                              // this.handleChange(event);
                              // this.props.onChange(event);
  
                          // }}
                          options={this.props.dropDownList}
                          required={this.props.required}
                          className="form-control"
                          optionsKey="name"
                          optionsValue="id"
                          // readOnly={this.props.readOnly}
                          // onClick={this.props.onClick}
                      /&gt;
                      &lt;FieldFeedbacks for={this.props.name} className="form-control-feedback"
                                      style={styles.errorStyle}&gt;
                          &lt;FieldFeedback when="valueMissing" /&gt;
                          {(this.props.required)?
                          &lt;FieldFeedback when={value =&gt; /^ *$/.test(value)}&gt;Please enter valid text&lt;/FieldFeedback&gt;:null}
                      &lt;/FieldFeedbacks&gt;
                  &lt;/FormGroup&gt;
  
          );
      }
  }
  </code></pre>
  
  <p>and the drop data looks like</p>
  
  <blockquote>
    <p>dropDownList=[
            {name: "NAme",id:1,key:"Key"}];</p>
  </blockquote>