How to use

AsyncTypeahead

in

react-bootstrap-typeahead

const Search = ({ shows, fetchShows, selectShow, onChange }) => {
 const [value, setValue] = useState('');
 const options = (shows.search[value] || []).map(id => shows.detail[id]);

 return (
  <AsyncTypeahead
   autoFocus
   labelKey="name"
   filterBy={() => true}
   onSearch={term => {
    fetchShows(term);
    setValue(term);
   }}
   onChange={selectShow}
   placeholder="Search for a TV show..."
   isLoading={Boolean(value) && !shows.search[value]}
   options={options}
  />
 );
}

<AsyncTypeahead
  onBlur={onBlur}
  isInvalid={isValid !== null ? !isValid : null}