Am trying to use react-autosuggest with Redux using typeScript and I can't seem to get it work. Uncaught TypeError: Cannot read property 'trim' of undefined

[giresse19]

// P.S: Please any help will be apprecaited.. pls am new to using Redux.. Please any help will be appreciated. I have the error: Autosuggest.js:291 Uncaught TypeError: Cannot read property 'trim' of undefined, but am not using event.target.value on my onChange method. Please I have pasted all my code well commented on codePen which u can see using this link: https://codepen.io/giresse19/pen/dqqmRQ

Thanks in advance.

[Vitzkrieg]

I ran into the same issue. The function trim() is only for strings so you either need to typecast the value argument to a string or check if it's null or undefined before calling escapeRegexCharacters()

export function getMatchingLanguages(value: string) {

OR

export function getMatchingLanguages(value: any) {
    const escapedValue = escapeRegexCharacters(String(value).trim());

OR

export function getMatchingLanguages(value: any) {
    if (!value) {
        return [];
    }
    const escapedValue = escapeRegexCharacters(value.trim());

I hope those help.

[ntbosscher]

I ran into a similar issue when you define getSuggestionValue to return a non-string value. I know this isn't the issue that you were experiencing @giresse19, but might be helpful to document here.

The following will give a "Cannot read property 'trim' of undefined" error when the user presses the up or down arrow on the selection list.

interface Food {
     name: string;
}

<Autosuggest
    inputProps={{
          value: this.state.value,
          onChange: (form, event) => {
                 this.setState({
                      value: event.newValue // <-- this is the problem
                  });
          }
    }}
    getSuggestionValue={(item: Food) => item}
/>

The issue is that event.newValue is a string when the user is typing, but is of type Food when the user presses the up/down arrows.

EDIT

I should note, that my example above is a misuse of how getSuggestedValue is supposed to work, don't do that

[maxgfr]

+1 I got the same problem. To resolve it, I did something like that :

.....
const onChange = (_e, { newValue }) => { setQuery(typeof newValue === "string" ? newValue : "") };
.....
 const onSearch = async ({ value }) => {
    setQuery(typeof value === "string" ? value : "")
  };
....