Как связать инпут из react-autosuggest с react-hook-form?

Question

[Gimir]

Добрый вечер! У меня на странице есть инпут из библиотеки react-autosuggest, контролируемый. Хочу добавить валидацию и исключить ненужные рендеры с помощью библиотеки react-hook-form. Хотя на в документации react-hook-form и есть инструкция как интегрировать ее в сторонние библиотеки, у меня это не получается, вот как я это делаю:

const { handleSubmit, reset, control } = useForm();

<Controller
    control={control}
    name="some_name"
    render={({ onChange, onBlur, value, name }) => (
       <SuggestInput
       onInputChange={onChange}
       inputValue={value}
       name={name}
       getSuggestions={getSuggestions}
       />
     )}
/>

Вот компонент SuggestInput:

const SuggestInput = ({ onInputChange, inputValue, getSuggestions, name }) => {

    const [ options, setOptions ] = useState([]);

    const inputProps = {
        value: inputValue,
        onChange: (event, {newValue}) => onInputChange(newValue)
    }
    const getSuggestionValue = suggestion => suggestion.name;

    const renderSuggestion = suggestion => (
    <SuggestWrapper>
        {suggestion.name}
    </SuggestWrapper>
    );
    const renderInputComponent = (inputProps) => <input type="text" {...inputProps} name={name} />

    const onSuggestionsFetchRequested = ({ value }) => {
        getSuggestions(value).then(suggestions => setOptions(suggestions))
    };
    const onSuggestionsClearRequested = () => setOptions([])

    return <Autosuggest
            renderInputComponent={renderInputComponent}
            suggestions={options}
            onSuggestionsFetchRequested={onSuggestionsFetchRequested}
            onSuggestionsClearRequested={onSuggestionsClearRequested}
            getSuggestionValue={getSuggestionValue}
            renderSuggestion={renderSuggestion}
            inputProps={inputProps}
            theme={theme}
        />
}

Я получаю такую ошибку когда компонент рендерится:
Uncaught TypeError: Cannot read property 'trim' of undefined в компоненте SuggestInput

Как связать этих двух что-бы все работало как надо?

Answer 1

[Gimir]

Надо было добавить defaultValue компоненту контроллера, Autosuggest пытался вызвать метод trim на undefined, по этому была ошибка.

Comments

[balex777]

А как вместе name передавать в value объект, во всех примерах при выборе в списке в value попадает просто lable даже не id выбранного элемента, а мне вообще нужно объект поставить, а этот метод принимает только string

const getSuggestionValue = suggestion => suggestion.name;