How can I add custom props to an Option using React Select?

Question

My goal is to add a tooltip when the user expands the menu and hovers over the items listed. To do this, I need to add data-tip and data-for to the menu items.

The options I'm passing to React Select looks like this:

  [
    { value: 1, label: 'Onw' },
    { value: 2, label: 'Two' },]

I'd like to just add the prop info there but I don't think there's a way. Do I need to customize the rendering of each option? Any tips on how to do this would be appreciated. Thanks.

Hi there! Amybe duplicate from this: stackoverflow.com/questions/38383720/… — Alex
– Alex, Commented Sep 6, 2017 at 1:24
Possible duplicate of ReactSelect: pass in extra data to be used by custom render — Alex
– Alex, Commented Sep 6, 2017 at 3:08

Phat Tran · Accepted Answer · 2020-02-16 11:45:01Z

3

You can simply wrap your custom Option inside a function then assign custom props for it

components={{ Option: (optionProps) => <Option {...optionProps} onEditItem={onEditItem}
    onDeleteItem={onDeleteItem} />  }}

answered Feb 16, 2020 at 11:45

Phat Tran

3,9901 gold badge23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nymphadora Over a year ago

is there a way to achieve this without having to use the custom 'Option' component?

Phat Tran Over a year ago

Hi @nymphadora, It was long time, the I don't know what is the current behavior of it. But based on the code on the screenshot, I guess it's only accept the component, so We have to pass the component

Shahriar · Accepted Answer · 2022-02-17 18:32:18Z

react-select seems to be only accepting value and label as props (and possibly other HTML attributes that an <option> accepts), so I did this with the help of a function:

const options = [
   { value: "a", label: "A", tooltip: "yellow" },
   { value: "b", label: "B", tooltip: "orange" },
   { value: "c", label: "C", tooltip: "blue"   },
];

function getTooltip(value) {
   return options.find(x => x.value === value).tooltip;
}

/* A custom option component as an example */
const Option = (props) => {
   return (
      <components.Option {...props}>
         <div data-tip={getTooltip(props.value)}>
             {props.label}
         </div>
      </components.Option>
   );
};

/* Pass the custom component to <Select> */
return (
   <Select options={options} components={{ Option }} />
)

Collectives™ on Stack Overflow

How can I add custom props to an Option using React Select?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related