constructor(props){
    super(props);
    this.items = [
        'David',
        'Sara',
        'Jane',
        'Daniel',
        'Debra'
    ];
    this.state = {
        suggesstions: []
    };
}

onTextChange = (e) => {
    // console.log(e.target.value);
    const value = e.target.value;
    let suggesstions = [];

    if (value.length > 0) {
        const regex = new RegExp(`^${value}`, 'i');
        suggesstions = this.items.sort().filter(v => regex.test(v));
    }
    this.setState(() => ({ suggesstions }));
}

renderSuggestions () {
    const { suggesstions } = this.state;
    if (suggesstions.length == 0) {
        return null;
    }
    return (
        <ul>
            {suggesstions.map((item) => <li>{item}</li>)}
        </ul>
    );
}

render(){
		return (
      <input onChange={this.onTextChange} type="text" />
      {this.renderSuggestions()}
    )
}