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.

Answer 1

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