0
145
ViewsReact Select abreviate dropdown names on multi select
Hi is it possible to abbreviate dropdown names when selected like the figure below
this is my code :
multiValue: [
{ value: "BUF", label: "BUF" },
{ value: "CCT", label: "CCT" },
{ value: "JHB", label: "JHB" },
{ value: "EKH", label: "EKH" },
{ value: "ETK", label: "ETK" },
{ value: "MAN", label: "MAN" },
{ value: "NMB", label: "NMB" },
{ value: "TSH", label: "TSH" }
],
handleMultiChange(option) {
this.setState({multiValue: option});
}
<Select
id='multiple'
name="filters"
placeholder="Filter City"
value={this.state.multiValue}
options={this.state.filterOptions}
onChange={this.handleMultiChange}
isMulti={this.state.isMulti}
styles={style}
/>
·
Juan Pablo Isaza
1 answers
Answer question0
You could accomplish this by providing a custom MultiValueLabel component
MultiValueLabel.component.js
export default function MultiValueLabel({
data,
innerProps,
selectProps
}) {
// ...any logic you might need
// 'data' should be the full object of each selected item
// so reference whatever key is necessary
return (
<div {...innerProps}>
{data.abbr}
</div>
)
}
Then you just pass that in
<Select
components={{
MultiSelectLabel
}}
... other props
/>
·
Juan Pablo Isaza
Report
Answer question