react-select function call on click event on the chip

user_14216993 0
Viewed 1354

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.

react-select reactjs javascript
2 Answers

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,
  }}
user_117006600

You can attach onClick listener in MultiValueLabel component

<Select
  isMulti={true}
  components={{
    MultiValueLabel: (props) => {
      return (
        <div onClick={() => console.log(props.data)}>
          <components.MultiValueLabel {...props} />
        </div>
      );
    }
  }}
  {...}
/>

Live Demo

Edit React Select - Chip OnClick

user_94494260
Related