Auto complete search

home.js

import React, { Component } from "react";
import "./Home.css";
import SearchBar from "./SearchBar";
import Suggestion from "./Suggestion";
import axios from "axios";

const API_URL =
  "https://pbwjz4q5oh.execute-api.us-east-2.amazonaws.com/dev/api/search";
const WAIT_INTERVAL = 500;

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: "",
      lang: "en",
      page_id: "",
      results: []
    };
  }

  componentWillMount() {
    this.timer = null;
  }

  handleInputChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  };

  handleQueryChange = query => {
    clearTimeout(this.timer);
    this.setState({ query, results: [] });
    this.timer = setTimeout(this.getData, WAIT_INTERVAL);
  };

  getData = async () => {
    try {
      const { query, lang, page_id } = this.state;
      const response = await axios.get(
        `${API_URL}?q=${query}&lang=${lang}&page_id=${page_id}`
      );
      this.setState({
        results: response.data.data
      });
    } catch (error) {
      console.error(error);
    }
  };

  render() {
    const { lang, query, page_id, results } = this.state;
    return (
      <div>
        <div className="container-fluid">
          <div className="row">
            <div className="input-group">
              <h1>FAQ Check (Testing)</h1>
            </div>
            <div className="input-group">
              <div className="col-md-2">
                <select
                  className="form-control search-faq"
                  id="lang"
                  onChange={this.handleInputChange}
                  value={lang}
                >
                  <option value="en">English</option>
                  <option value="ja">Japanese</option>
                  <option value="tw">Taiwanese</option>
                </select>
              </div>
              <div className="col-md-2">
                <input
                  type="text"
                  className="form-control search-faq"
                  id="page_id"
                  placeholder="Page id"
                  value={page_id}
                  onChange={this.handleInputChange}
                />
              </div>
              <SearchBar query={query} onQueryChange={this.handleQueryChange} />
              <Suggestion results={results} />
            </div>
          </div>

          <div className="content-answer" />
        </div>
      </div>
    );
  }
}

SearchBar.js

import React, { Component } from "react";

export default class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.handleQueryChange = this.handleQueryChange.bind(this);
  }

  handleQueryChange = e => {
    this.props.onQueryChange(e.target.value);
  };

  render() {
    return (
      <div className="col-md-8">
        <input
          type="text"
          className="form-control search-faq"
          id="search-text"
          placeholder="I have a question about ..."
          value={this.props.query}
          onChange={this.handleQueryChange}
        />
        <i className="fa fa-search icon-search" />
        <div className="input-group search-complete" />
      </div>
    );
  }
}

Suggestions.js

import React from "react";

const Suggestions = props => {
  const options = props.results.map(r => <li key={r.qid}>{r.q}</li>);
  return <ul>{options}</ul>;
};

export default Suggestions;