react-select function call on click event on the chip

Question

Hi I am trying to change a state in my component when there is a click event on a particular chip rendered in the search bar. Is that possible to do?

I am aware of the multiValue multiValueLabel and I can for example change the background color of the chip with that, so I thought I could use those tags to change the state but I didn't have any luck.

I have attempted to find a solution with isSelected tag but I am always reading undefined in the states.isSelected when console.logged it.

I feel like I need a onClick() functionality somewhere but I can't figure it out. A bit of a guidance would be much appreciated! I am sharing a live code here so maybe we can discuss over it.

Answer 1

if you want to validate if an option is selected you could use the prop: isOptionSelected

or

  const onChange = selectedOptions => setSelected(selectedOptions);

with props

  isMulti
  value={selected}
  onChange={onChange}
  components={{
    MultiValue: SortableMultiValue,
  }}