CODEWITHSUNDEEP
reactjsmaterial-ui
Aaron
Aaron

Reputation: 81

How to Change state of Multiple values chips of React matrieal UI Autocomplete

I want to implement a function by React Material UI Autocomplete.

This is the document I have checked: https://mui.com/material-ui/react-autocomplete/

The function I am trying to develop is that a user can select multiple values from the autocomplete list, which are displayed as chips just like the example in the document above.

The advanced part is, for example, a chip can be displayed in red color as default, and when a user clicks the chip, it can become blue color. That is, A User can control every chip's state by clicking on those chips to achieve toggling function.

For example, a user selects "Tea", "Baseball", and "Pencil" from the Multiple values autocomplete list, then "Tea", "Baseball" and "Pencil" are displayed red color initially. When the user clicks on the "Tea" chip, it can become blue color while "Baseball" and "Pencil" remain red. Next, when the user clicks on the "Tea" chip again, it can become back to red color again while "Baseball" and "Pencil" remain red. Moreover, I want to get every chips' current color state also.

I read the document for quite a long time, but still have no idea how to implement stateful multiple values autocomplete component.

Thanks for the help from all of you.

Upvotes: 0

Views: 547

Answers (1)

Neon
Neon

Reputation: 510

Managing colors in itself isn't complex. But the functionality you want regarding maintaining which chips are selected after user enters in drop down isn't provided by this component. What you want is a list to be populated based on the values user enters in the dropdown. They should show up as chips in red and only once user clicks on them they should be turned to blue (hence finally selected). If you will look closely at that component, this feature isn't there.

You need some other alternative or you would need to make a custom component. You can check this component and try for a custom implementation. https://mui.com/material-ui/react-chip/

Upvotes: 1

Related Questions