SearchBox.jsx

import React from "react";

class SearchBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      query: ""
    };
  }

  onQueryChange(e) {
    this.setState({ query: e.target.value });
  }
  
  render() {
    return (
      <div className="input-group mb-3">
        <input
          type="text"
          value={this.state.query}
          onChange={e => this.onQueryChange(e)}
          className="form-control"
          placeholder={this.props.promptText || 'Search...'}/>
        <div className="input-group-append">
          <button
            className="btn btn-primary"
            onClick={() => this.props.onSearch(this.state.query)}
            type="button">
            Search
          </button>
        </div>
      </div>
    );
  }
}

export default SearchBox;