How to change selected value of React-Bootstrap-Typeahead from HOC

Question

I have two Typeahead (react-bootstrap-typeahead) component and I want to reverse selected values when pressed a button. The data which stored in state changing correctly. But I can't set changed selections to a value of Typeahead.

Used selected prop to set selected object but got some errors:

Warning: [react-bootstrap-typeahead] `defaultInputValue` will be overridden by the value from `selected`.

Warning: Failed prop type: Invalid prop `selected` supplied to `TypeaheadContainer(WrappedTypeahead)`.

My HOC

<TypeaheadComponent
    onSearch={value => getOriginPlaces(value, index)}
    data={route.originResults}
    onInputChange={value => originPlaceInputOnChange(value, index)}
    onSelect={item => originPlaceOnSelect(item, index)}
    selected={route.originPlace} // object
    inputValue={route.originPlaceInputValue} // string from  originPlaceInputOnChange()
/>

And AsyncTypeahead (react-bootstrap-typeahead)

<AsyncTypeahead
    promptText={<PromptText />}
    searchText={<Loading />}
    emptyLabel={<NotFound />}
    inputProps={{...}}
    options={props.data}
    maxResults={10}
    paginationText={...}
    labelKey="name"
    filterBy={[...]}
    onSearch={props.onSearch}
    minLength={2}
    selectHintOnEnter={true}
    onInputChange={props.onInputChange}
    onChange={selected => props.onSelect(selected[0])} // set first object of array
    defaultInputValue={props.inputValue || ''}
    selected={props.selected} // object
    renderMenu={...}
/>

How can I do this? Or where I am wrong

Answer 1

Your main problem is that selected needs to be an array, not an object. Try passing an array containing the selection (eg: [props.selected] ) to the AsyncTypeahead. That should work.

For the second warning, defaultInputValue will set the input value only when the typeahead initially mounts (not subsequent renders), and any input value derived from selected will take precedence.