How can I build a filter in React with the Autocomplete component from MaterialUI using state?

Question

I am building a filter with the Autocomplete component from MaterialUI. When selecting options from the dropdown:

• The Autocomplete component also will append to the Chip Array as options are selected.
• The value of that option is added to an array filter in the state object.

Through the event object from the onChange prop, I can successfully add this value to the array using event.target.textContent. When trying to handle removing elements however, things haven't felt as straight forward but I'm likely missing something.

There is an onDelete prop within each Chip component - this (and others) can be accessed through the prop ChipProps in Autocomplete. Without touching the onDelete prop, the Chip from the filter is removed, but the array results from the current state is not going to be updated.

The example code from here seems to do what I would like but this is using just Chip components by maping through the Chips to create and passing each one through its own respective onDelete. I don't see how to do that with the Autocomplete where the Chips are populated outside of that context.

Any help here would be appreciated and please go easy as I am new to React...

Answer 1

Fixed the problem by adding a second parameter to the onChange function as this apparently holds the value when used. Docs didn't seem to mention this in the examples. Would love to learn more about it if anyone knows.