React CustomDropdownInput
It is an input with a dropdown.
The dropdown gets triggered on focus.
The input has the bootstrap class form-control but bootstrap is not needed.
Example
Try it on codesandbox.io
Props
- values -> is an array and it will be shown as options in the dropdown
const options1 = [
{ id: 1, label: 'John' },
{ id: 2, label: 'Miles' },
{ id: 3, label: 'Charles' },
{ id: 4, label: 'Herbie' },
];
- handleChange -> gets called everytime the user types on the input
handleChange = (value) => {
//value is the input typed
}
- handleSelected -> gets called everytime the user clicks on a dropdown option
handleSelected = (option) => {
///option is the option selected on the dropdown
}
Usage
<CustomDropdownInput values={options1} handleSelected={this.handleSelected} handleChange={this.handleChange} />