Typeahead-index.js

import React from "react";
import PropTypes from "prop-types";
import Downshift from "downshift";

class Typeahead extends React.Component {
  state = {
    value: null
  };

  handleStateChange = changes => {
    let value;
    if (changes.hasOwnProperty("selectedItem")) {
      value = changes.selectedItem;
    } else if (changes.hasOwnProperty("inputValue")) {
      value = changes.inputValue;
    }
    
    // Could remove if you checked if you got one of inputValue or selectedItem as it seems to get a number of other events
    if (value === undefined) {
      return;
    }

    this.setState(() => {
      this.props.onChange(value);
      return { value };
    });
  };

  render() {
    const { onChange, ...otherProps } = this.props;
    return (
      <Downshift
        itemToString={item => (item ? item.value : "")}
        onStateChange={this.handleStateChange}
        selectedItem={this.state.value}
        {...otherProps}
      />
    );
  }
}

Typeahead.propTypes = {
  onChange: PropTypes.func.isRequired
};

export default Typeahead;