Elep

import React, { Component } from 'react'
import { SearchItem } from './SearchItem'

export class SearchList extends Component {
    constructor(props){
        super(props)
        this.state = {
            places: [],
            searchterm: ''
        }
    }

onChange = (e) => {
        this.setState({ searchterm: e.target.value }, () => {
            if(this.state.searchterm.length > 3){
                fetch(`/places/name/search?q=${encodeURI(this.state.searchterm)}`, {credentials: 'same-origin'})
                .then(response => response.json())
                .then(places => {
                    console.log(places)
                    this.setState({places})
                })
                .catch(error => console.log(error))
            }
        })   
    }

render() {
        return (
            <div className="search-list">
                <div className="search-top">
                    <div className="search-input">
                        <div className="search-inner place-search-inner">
                            <div className="inputs">
                                <div className="row">
                                    <div className="col-sm-12 food-cont">
                                        <input type="text" onChange={this.onChange} className="form-control full-search-rad place-find query" id="place-find" placeholder="Find your favourite places..." autoFocus />
                                    </div>
                                </div>
                            </div>
                            <button type="submit" className="button button-primary"><span>Find</span></button>
                        </div>
                    </div>
                </div>
                <div className="search-actual-results only-place-search">
                    <div className="results-list" id="places-list">
                        {this.state.places.map(place => <SearchItem place={place} key={place.slug} />)}
                    </div>
                </div>
            </div>
        )
    }
}

export default SearchList