Skip to content
Advertisement

react select similar function to getOptionLabel function in 1.3 version

h guys , I am making a react app with react select 1.3 version , I need to add a custom function to drop down which includes 2 keys. I noticed latest react select has a function for this

getOptionLabel

I want to find something similar to this function for react select version 1.3 . could anyone able to help me on this ?

this is not supported in react select version 1.3 need a function similar to this

   getOptionLabel={(option) => `${option.label}: ${option.rating}`}

Advertisement

Answer

You can relabel the options by mapping the original options array to a new one, like this:

const options = colourOptions.map(({ value, label, color }) => ({
  value,
  label: `${value}: ${label}, ${color}`
}));

Since the custom <select> is now using new objects, you need to make a change to handleChange so the original options are used in the state:

handleChange = (alteredOptions) => {
  // map altered options to actual options using the value
  const selectedOptions = alteredOptions.map((so) =>
    colourOptions.find((co) => co.value === so.value)
  );
  this.setState({ selectedOptions });
};
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement