CODEWITHSUNDEEP
javascriptreactjsreact-select
Tuna Ozerdem
Tuna Ozerdem

Reputation: 41

react-select function call on click event on the chip

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.

Upvotes: 3

Views: 3768

Answers (2)

Edison Sanchez
Edison Sanchez

Reputation: 104

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

Upvotes: 2

NearHuscarl
NearHuscarl

Reputation: 81520

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

Upvotes: 0

Related Questions