Instant Search Old

import React, {Component} from 'react';
import axios from 'axios';

export default class Search extends Component {
    constructor(){
        super();

        this.state = {
            list: [],
            filteredList: [],
            searchString: '',
            suggestClassName: 'foodle-invisible',
        }

        this.filterList = this.filterList.bind(this);

    }

    componentDidMount() {
        axios.get('http://localhost:9000/location')
            .then( res => {
                let locations = res.data.map(location => location.name);
                this.setState({list: locations})
            })
    }



    filterList(value) {
        let searchValue = value.toLowerCase();
        let filteredList = this.state.list;

        filteredList = filteredList.filter(item => {
            return item.toLowerCase().search(searchValue)   !== -1;
        });

        this.setState({filteredList: filteredList});
        this.setState({searchString: value});
        this.setState({suggestClassName: 'foodle-search-suggest'})
    }

    render(){
        let searchItems = this.state.filteredList.map((item, index) => {
            return <SearchItem filter={this.filterList} key={index} value={item} />
        });

        return(
            <div className="foodle-search-bar-container">
                <div className="foodle-search-bar-wrapper">
                    <SearchInput value={this.state.searchString} update={this.filterList} />
                    <ul className={this.state.suggestClassName}>
                        {searchItems}
                    </ul>
                </div>                
            </div>
        );
    }
}

class SearchInput extends Component {
    constructor(){
        super();

        this.state = {
            fireRedirect: false
        }

        this.onValueChange = this.onValueChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    onValueChange(event){
        this.props.update(event.target.value);
    }

    handleSubmit(event) {
        // alert('Your search: ' + this.props.value);
        event.preventDefault();
        this.setState({fireRedirect: true})

    }
    render(){
        return(
            <div>
            <form onSubmit={this.handleSubmit}>
                <input type="text" ref="input" placeholder="Where are you in Vietnam?" autoFocus className="foodle-search-bar" onChange={this.onValueChange} value={this.props.value}/>
                <input type="submit" value="Search"/>
            </form>
            
            </div>
        )
    }
}

class SearchItem extends Component {
    constructor() {
        super();

        this.state = {
            searchResult: []
        }
    }

    onItemClick(value, event){
        this.props.filter(value);
        console.log(value)
        axios.get('http://localhost:9000/dishes', {
            params: {
                location: value
            }
        }).then(res => {
            this.setState({searchResult: res.data})
        });
    }
    render(){
        let searchResult = this.state.searchResult.map((item, index) => {
            return <SearchResult key={index} name={item.name} description={item.description}/>
        });
        return(
            <div>
            <li className="foodle-search-suggest-item" onClick={this.onItemClick.bind(this, this.props.value)}> {this.props.value}
            </li>
            {searchResult}           
            </div>
        )
    }
}

export class SearchResult extends Component {
    render() {
        return(
            <div className="">
                <h2>{this.props.name}</h2>
                <p>{this.props.description}</p>
            </div>    
        )
    }
}