react-autosuggest: Uncaught TypeError: Cannot read property 'trim' of undefined

When i type in the search bar this show me the results, but when i click on a value the console give me this ‘Uncaught TypeError: Cannot read property ‘trim’ of undefined’, and my app don’t reload the view until I deleted the value on search bar. Any idea or solution? ( sorry for my bad english)

Screenshots:

before type on the search bar:

When i type on search bar style (doesn’t matter)

And when i click on a value(the progress bar and the time don’t reload until after deleted value on search bar):

When i deleted the value on search bar:

First TypeError:

And the last TypeError:

shouldRenderSuggestions	@	AutosuggestContainer.js:174
componentWillReceiveProps	@	Autosuggest.js:72
(anonymous function)	@	ReactCompositeComponent.js:611
measureLifeCyclePerf	@	ReactCompositeComponent.js:75
updateComponent	@	ReactCompositeComponent.js:610
receiveComponent	@	ReactCompositeComponent.js:547
receiveComponent	@	ReactReconciler.js:125
_updateRenderedComponent	@	ReactCompositeComponent.js:754
_performComponentUpdate	@	ReactCompositeComponent.js:724
updateComponent	@	ReactCompositeComponent.js:645
receiveComponent	@	ReactCompositeComponent.js:547
receiveComponent	@	ReactReconciler.js:125
_updateRenderedComponent	@	ReactCompositeComponent.js:754
_performComponentUpdate	@	ReactCompositeComponent.js:724
updateComponent	@	ReactCompositeComponent.js:645
receiveComponent	@	ReactCompositeComponent.js:547
receiveComponent	@	ReactReconciler.js:125
updateChildren	@	ReactChildReconciler.js:109
_reconcilerUpdateChildren	@	ReactMultiChild.js:208
_updateChildren	@	ReactMultiChild.js:312
updateChildren	@	ReactMultiChild.js:299
_updateDOMChildren	@	ReactDOMComponent.js:936
updateComponent	@	ReactDOMComponent.js:754
receiveComponent	@	ReactDOMComponent.js:716
receiveComponent	@	ReactReconciler.js:125
_updateRenderedComponent	@	ReactCompositeComponent.js:754
_performComponentUpdate	@	ReactCompositeComponent.js:724
updateComponent	@	ReactCompositeComponent.js:645
receiveComponent	@	ReactCompositeComponent.js:547
receiveComponent	@	ReactReconciler.js:125
updateChildren	@	ReactChildReconciler.js:109
_reconcilerUpdateChildren	@	ReactMultiChild.js:208
_updateChildren	@	ReactMultiChild.js:312
updateChildren	@	ReactMultiChild.js:299
_updateDOMChildren	@	ReactDOMComponent.js:936
updateComponent	@	ReactDOMComponent.js:754
receiveComponent	@	ReactDOMComponent.js:716
receiveComponent	@	ReactReconciler.js:125
_updateRenderedComponent	@	ReactCompositeComponent.js:754
_performComponentUpdate	@	ReactCompositeComponent.js:724
updateComponent	@	ReactCompositeComponent.js:645
performUpdateIfNecessary	@	ReactCompositeComponent.js:561
performUpdateIfNecessary	@	ReactReconciler.js:157
runBatchedUpdates	@	ReactUpdates.js:150
perform	@	Transaction.js:140
perform	@	Transaction.js:140
perform	@	ReactUpdates.js:89
flushBatchedUpdates	@	ReactUpdates.js:172
closeAll	@	Transaction.js:206
perform	@	Transaction.js:153
batchedUpdates	@	ReactDefaultBatchingStrategy.js:62
enqueueUpdate	@	ReactUpdates.js:200
enqueueUpdate	@	ReactUpdateQueue.js:24
enqueueSetState	@	ReactUpdateQueue.js:219
ReactComponent.setState	@	ReactComponent.js:63
handleSongPlaying	@	App.js:55
whileplaying	@	index.js:153
SMSound._whileplaying	@	soundmanager2.js:3421
SMSound._onTimer	@	soundmanager2.js:2953
(anonymous function)	@	soundmanager2.js:4106
(anonymous function)	@	soundmanager2.js:3852

The line 55 of my app.js:

handleSongPlaying(audio) {
        this.setState({
            elapsed: this.parseMilliseconds(audio.position),
            total: this.parseMilliseconds(audio.duration),
            position: audio.position / audio.duration
        })
    }

The states;

this.state = {
            track: {
                stream_url: '',
                title: '',
                artwork_url: ''
            },
            playStatus: Sound.status.PLAYING,
            elapsed: '00:00',
            total: '00:00',
            position: 0,
            playFromPosition: 0,
            autoCompleteValue: '',
            tracks: []
        }

Any idea or solution for this? 🤕

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 5
Comments: 20 (2 by maintainers)

Commits related to this issue

Update README.md Adds hints that `event.target.value` should not be used in the `onChange` handler, since it may be undefined (e. g. in case of a click on a suggestion, `event.target` is not the inpu... — committed to philipstanislaus/react-autosuggest by philipstanislaus 7 years ago

Most upvoted comments

I stumbled accross the same error. In my case was not a bug, but a misunderstanding of the onChange handler:

I used an onChange handler as I would on every other input:

onChange = (event) => {
  this.setState({ value: event.target.value })
}

While the Autosuggest component provides the new value not within event.target, but in the second parameter:

onChange = (event, { newValue }) => {
  this.setState({ value: newValue })
}

I just submitted a minor PR that includes a hint in the documentation: https://github.com/moroshko/react-autosuggest/pull/396

+43

philipstanislaus on Jul 2, 2017

It’s hard to say from the information you provided what’s wrong.

This error could appear if somehow inputProps.value ends up not being a string. Could you verify that it is always a string?

If you still can’t figure this out, could you create a Codepen that reproduces the issue?

+18

moroshko on May 22, 2017

This worked for me , in case somebody needs it

onChange = (event, { newValue }) => {
        this.setState({
            value: typeof newValue !== 'undefined' ? newValue : '',
        });
};

makostom on Nov 3, 2017

You can check this in your AutosuggestContainer.js, or maybe your Search.js file.

What you should be checking is that the value that you pass as an argument to inputProps is a string value.

If you followed the examples in the doc, you should have something like this :

const inputProps = {
      placeholder: 'Type a programming language',
      value,
      onChange: this.onChange
};

where value is set by

const getSuggestionValue = suggestion => suggestion.name;

If you find the place where the value is set, you can check that you never return a value that is not a string. As an example, I had the same problem because I was returning suggestion.name but my data was on a different model, so I had to change to something like suggestion.myobject.myproperty.

thisfrontenddev on May 22, 2017

Throwing this up here for anyone else that may run into this error. I ran into this and it ended up being my getSuggestionValue const. I had:

const getSuggestionValue = suggestion => {
  suggestion.username;
};

but it should have been:

const getSuggestionValue = suggestion => suggestion.username;

daffinito on Aug 13, 2017

@fozerol IIRC in the first example, the arrow function is just executing suggestion.username, which does nothing since it’s a string. Without the braces, like in the second example, suggestion.username gets returned, which is why it works and the first one doesn’t. I never use the non-braced version and explicitly return my values; so, I might not be the best to explain this, but that’s how it works if memory serves.

u4yk on Dec 31, 2018

Throwing this up here for anyone else that may run into this error. I ran into this and it ended up being my getSuggestionValue const. I had:
const getSuggestionValue = suggestion => {
  suggestion.username;
};
but it should have been:
const getSuggestionValue = suggestion => suggestion.username;

this solved my case, thank you , can you explain what is the difference between them, i am new in react and cant see any difference

fozerol on Dec 31, 2018