Enhancement. Important for my data use case.

[johnpittman]

Can you please add callbacks as options for valueField/labelField to access data? We use nested data structure so need something like: labelField={(item) => { return item.attributes.name;}}

Currently you're just assuming data structure are flat.

[sanusart]

@johnpittman feels like an age case. Can't you just re-map the options to the desired structure before you pass it to options prop? Something like the following should do the job:

const newOptions = () =>
    oldOptions.map(item => ({
      label: item.attributes.name,
      value: item.email
    }));

...

return (
  <Select
     options={newOptions}
     onChange={() => null}
  />
);

[johnpittman]

It's a very common feature. All other components I use or build include the ability. We have filters with 10 dropdowns that all have large datasets. The reason for not remapping each is because a lot of dropdown have over 1000 options as the data set so you doing double the work/bloating in the UI thread just to read the label fields. John R. Pittman | <https://plus.google.com/u/0/100394734061909211307/about/p/pub> johnrichardpittman@gmail.com mobile: 561-460-2051

…

On Tue, Jul 16, 2019 at 2:09 PM Sasha Khamkov ***@***.***> wrote: @johnpittman <https://github.com/johnpittman> feels like an age case. Can't you just re-map the options to the desired structure before you pass it to options prop? Something like the following should do the job: const newOptions = () => oldOptions.map(item => ({ label: item.attributes.name, value: item.email })); ... return ( <Select options={newOptions} onChange={() => null} /> ); — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#17?email_source=notifications&email_token=ABQBU22PCYC3FTFFEAOMHPDP7Y2JDA5CNFSM4IEHZN22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2CFFJA#issuecomment-511988388>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABQBU24H5JRK5FBAP73DZR3P7Y2JDANCNFSM4IEHZN2Q> .

[sanusart]

I'll check the impact of your suggestion on the current codebase. I am not sure it is less load on UI thread as select use this fields pretty heavily internally to access data and work on dataset while simple looping, memoized/cached is "cheaper".

…

On Wed, Jul 17, 2019, 1:25 AM John Pittman ***@***.***> wrote: It's a very common feature. All other components I use or build include the ability. We have filters with 10 dropdowns that all have large datasets. The reason for not remapping each is because a lot of dropdown have over 1000 options as the data set so you doing double the work/bloating in the UI thread just to read the label fields. John R. Pittman | <https://plus.google.com/u/0/100394734061909211307/about/p/pub> ***@***.*** mobile: 561-460-2051 On Tue, Jul 16, 2019 at 2:09 PM Sasha Khamkov ***@***.***> wrote: > @johnpittman <https://github.com/johnpittman> feels like an age case. > Can't you just re-map the options to the desired structure before you pass > it to options prop? Something like the following should do the job: > > const newOptions = () => > oldOptions.map(item => ({ > label: item.attributes.name, > value: item.email > })); > ... > return ( > <Select > options={newOptions} > onChange={() => null} > /> > ); > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > < #17?email_source=notifications&email_token=ABQBU22PCYC3FTFFEAOMHPDP7Y2JDA5CNFSM4IEHZN22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2CFFJA#issuecomment-511988388 >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/ABQBU24H5JRK5FBAP73DZR3P7Y2JDANCNFSM4IEHZN2Q > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#17?email_source=notifications&email_token=AACBLRXYWJX4WH3DYK3KENLP7ZDE7A5CNFSM4IEHZN22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2CNL6Q#issuecomment-512022010>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACBLRSVWIOCP27HM3MJNMLP7ZDE7ANCNFSM4IEHZN2Q> .

[sanusart]

@johnpittman So this is very similar to original request, you can specify path instead of a string to access nested property. e.g.

<Select 
  valueField="attributes.name"
  labelField="attributes.name" 
  options={options}
  onChange={() => null}
/>

It is significant change to the code base and I want to keep testing it a bit more, so gonna keep it in the branch for some time. You may check it from the branch on your project if you want with loading it from branch:

npm uninstall --save react-dropdown-select && npm install --save react-dropdown-select#experimental-suppot-for-dotted-path-to-access-labelFiels-and-valueField

[sanusart]

Available since v3.2.0
Example of usage here