how to make sugesstion input feild in react
const INPUT_TIMEOUT = 250; //ms - It's our input delay
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
predictions: [],
};
this.onChange = this.onChange.bind(this);
}
getPredictions(value) {
// let's say that it's an API call
return [
'Boston',
'Los Angeles',
'San Diego',
'San Franciso',
'Sacramento',
'New York',
'New Jersie',
'Chicago',
].filter(item => item.toLowerCase().indexOf(value.toLowerCase()) !== -1);
}
onChange(e) {
// clear timeout when input changes value
clearTimeout(this.timeout);
const value = e.target.value;
this.setState({
value
});
if (value.length > 0) {
// make delayed api call
this.timeout = setTimeout(() => {
const predictions = this.getPredictions(value);
this.setState({
predictions
});
}, INPUT_TIMEOUT);
} else {
this.setState({
predictions: []
});
}
}
render() {
return (
<div >
<input type = "text" value={this.state.value} onChange = {this.onChange}/>
<div>
{
this.state.predictions.map((item, index) => (
<div key={index + item}>{item}</div>
))
}
</div>
</div>
)
}
}
ReactDOM.render( <TodoApp />, document.querySelector("#app"))