How to use different key for label and Value

[ksaurabh4]

Please include a clear and concise description of the feature or enhancement you would like to have added to the project.
Hi,

Options object has label and value. like options = [{label:"a",value:"b"}]

But data is coming with different keys, like options = [{id:"a",name:"b"}]

Is there any way by which we can make the component to understand to pick id as value and name as label?

[jakezatecky]

Hello. There is no native support to use different keys at this time.

A simple mapping would allow you to transform the data into a format accepted by the component:

const formattedOptions = originalOptions.map(
  ({ id, name }) => ({ value: id, label: name })
);

The code above assumes there are no nested options. If there are, you have to make this a little recursive, but it should still be an overall simple transformation.

[ksaurabh4]

@jakezatecky Thanks Jake for the answer, but this method I used but it is creating additional loop. So, I thought if there has any option to set as parameter.

[jakezatecky]

Solution included in future v6 release:

<DualListBox
  getOptionLabel={({ name }) => name}
  getOptionValue={({ id }) => id}
</