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}`}
CodePudding user response:
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 });
};