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} isLoading={isLoading || false} renderMenuItemChildren={(option, props, idx) => ( <Highlighter search={props.text}> {option.text} </Highlighter>