Ytukyg

I'm working with react-select and I want to customize only one option from the drop-down. Is there such an opportunity? I would like to do something like:

const CustomOption = ({ innerRef, innerProps, data }) => data.custom

    ? (<div ref={innerRef} {...innerProps} >I'm a custom link</div>)

    : defaultOne //<--- here I would like to keep default option



    <ReactSelect

        components={{ Option: CustomOption }}

        options={[

            { value: 'chocolate', label: 'Chocolate' },

            { value: 'strawberry', label: 'Strawberry' },

            { value: 'vanilla', label: 'Vanilla' },

            { custom: true },

    ]}

/>

Any thoughts how to achive that?

Your feeling is good, you can achieve your goal with the following way:

const CustomOption = props => {

  const { data, innerRef, innerProps } = props;

  return data.custom ? (

    <div ref={innerRef} {...innerProps}>

      I'm a custom link

    </div>

  ) : (

    <components.Option {...props} />

  );

};



const options = [

  { value: "chocolate", label: "Chocolate" },

  { value: "strawberry", label: "Strawberry" },

  { value: "vanilla", label: "Vanilla" },

  { custom: true }

];



function App() {

  return <Select components={{ Option: CustomOption }} options={options} />;

}

The important thing to notice is to pass the entire props property to the components.Option to have the default behaviour.

Here a live example.