React-select: Would be nice to be able to set label and value to custom properties

[minimaximus]

Right now, I have to make sure my array contains elements with label/value pairs, which requires modifications on the server. It would be really nice if react-select would take arbitrary elements as label/value fields. So for example, if I have [{name:'Alex', id: 1}, {name:'Jane', id:2}], I could tell react-select that the label field is 'name' and the value field is 'id'.

Thanks.

[dcousens]

@minimaximus why? Can you not transform your data prior to usage?
This is just pushing complexity lower, we should be lifting complexity out.

[dcousens]

Duplicate of https://github.com/JedWatson/react-select/issues/58
Related to https://github.com/JedWatson/react-select/pull/95

[adamscybot]

Also want this. Why bother transforming when the library could just use the correct keys as provided by my db? Less ops overall.

[evgenyrodionov]

Can tell my use case. I use http request for getting filtered data and my backend responded me with id, name fields. id will be used as value and name as label. That's why I need my settings for label and value fields.

[malonecj]

+1

[mmillet]

+1

[PetrSnobelt]

+1

[oluckyman]

In real use almost never we have { value, label } objects. It means that everyone who uses that library have to implement mapping from real data format to library acceptable format. So why not provide the getters for value and label as it done in other libraries?

[dcousens]

@oluckyman what other libraries?

[oluckyman]

d3 is heavily using accessors functions.
But now I have looked among autocomplete libs. Some of them provides custom getter and some of them no. jQuery autocompleter is like react-select, it doesn’t give alternatives to { label, value } format.

[PetrSnobelt]

If you try to use react select on existing api (which you can't modify), it is pain without ability to set label and value. Some api use Id and Name, some key and value etc...

[JedWatson]

I'm happy to add labelKey and valueKey props. Let's do this.

[oluckyman]

I already implemented this in my wrapper class, so I can do this for react-select too

Ilyá Belsky

Sent from my iPad

On 30 сент. 2015 г., at 15:39, Jed Watson [email protected] wrote:

I'm happy to add labelKey and valueKey props. Let's do this.

—
Reply to this email directly or view it on GitHub.

[JedWatson]

@oluckyman thanks for the offer, I jumped in and implemented this but would love some tests and a change review if you're up for it!

[mmrko]

@JedWatson thx for this neat abstraction! Do you think it'd make sense to add support for nested accessors?

const data = { foo: { bar : 'label' }, baz: { qux: 'value' } }

<Select valueKey='foo.bar' labelKey='bar.qux' ... />

Would be trivial to implement using e.g. lodash.get but not sure if you want to add another dependency to the project just for this (especially if you wouldn't need it elsewhere in the codebase) :smirk:

[nitinja]

Would love to have nested accessors as well! Thanks.

[mudrila]

For those, who found this issue, but can't find out how to get same functionality in newer versions: take a look at getOptionLabel prop.

[flowfelis]

Just to extend @mudrila 's answer, you can use getOptionLabel like this:

<Select
    options={myArrayOfObjects}
    getOptionLabel={(option) => option['myCustomLabel']}
/>