React-select: Multi labelKey or custom labelKey

[rizkiandrianto]

Hello, I wonder how to customize labelKey
for example I want to use Company Name and Person name with hyphen "a.k.a"
maybe like... labelKey={company_name + " a.k.a " +person_name} ?

Thank you...

[KalisaFalzone]

This is also a feature I would very much like, it doesn't look like it is available currently.

[danilobuerger]

+1

[valikd]

+1

[fabioespinosa]

+1

[IronTony]

+1

[agirton]

Hi @rizkiandrianto we have labelKey prop that you can customize does this provide what you're looking for?

[danvc]

@agirton could you provide an example about how to use multi label keys?

[agirton]

Hi @DanZeuss we provide this in our documentation: https://github.com/JedWatson/react-select/blob/master/examples/src/components/GithubUsers.js#L68

[danvc]

@agirton thank you for answering fast, however I don't have sure if it works like desired.

I've been looking in the source code, and looks like that the labelKey works fine just with one entry, like: "login" or "name".

But, if we want to do something more sophisticated like "firstName, lastName" (i.e. two labels or more), it doesn't work.

To work on this way, I've found out 2 ways:

• using optionComponent where we can render something according our needs, like adding many labels;
• mapping the result and then setting the labelKey for the new mapped field, like the example below:

// receive the options from some source
let options = [ 
  { name: "Daniel", age: 33 }
  { name: "Nicole", age: 1 }
]

// map the result that is going to be shown in each option
let mapped = options.map(p => {
  return {
     ...p,
     info: "My name is " + p.name + " and I have " + p.age + " years old"
  }
}

then set it in the component

<Select.Creatable
 options={mapped}
 labelKey="info"
/>

[msman]

+1

[hthanhbmt]

• 1

[mamof]

+1

[msman]

SOLVED

var mapped = options.map(s => {
return {     ...s,
         info:  `${s.time} ${s.period} ${s.day} ${s.day} ${s.month} ${s.year}`
      }
})

then Select should be

<Select  
  searchable 
  options={mapped}
  value={value}
  onChange={this.onChange}
  valueKey="ProApp_id"
  labelKey="info"
/>

pay attention to info and mapped

[mamof]

That's the solution I'm using right now but it would be nice to be able to specify multiple labelKeys with comma separation.

[PamJoslyn]

I used your mapping idea as a quick fix - thanks! Seems incorrect that the filtering doesn't search the options rendered in optionRenderer by default, if I don't provide a labelKey.

[cacharrin]

Maybe labelKey can receive a function:

<Select  
  options={options}
  value={value}
  valueKey="id"
  labelKey={element => element.firstname + " " + element.lastname}
/>

That would be awesome!

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue / pull request is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!