A simple react component that displays a list of values, of which you can filter via an input and select by clicking the value or pressing enter to choose the first displayed value.
npm install autocomplete-react-component@latest import React from 'react'; import Autocomplete from 'autocomplete-react-component'; export default class UsingAutoComplete extends React.Component { constructor(props) { super(props); this.state = { languagesArray: ['JavaScript', 'Java', 'Python'], }; } selectedLanguageHandler = clickedValue => { console.log(clickedValue); // JavaScript // Example Output, if clicked Language: JavaScript }; render() { return ( <AutoComplete style={{ color: 'grey' }} dropdownStyle={{ backgroundColor: 'grey' }} valuesStyle={{ color: 'pink' }} values={this.state.languagesArray} onClick={this.selectedLanguageHandler} /> ); } } 
- An array of values that will be displayed
- Returns the value of the item clicked, i.e the array Item clicked has a value of "JSON". onClick(value){} value will be equal to "JSON"
- Styles the individual li elements in the dropdown display
- Styles the dropdown display element
- Styles the Containing Element of the Rendered AutoComplete Component