[Select] pass label information in renderValue()

[ifndefdeadmau5]

renderValue() prop provides nice way of customizing how the displayed value should be looks like in Select.
However, some information is leaking:
e.g)

<MenuItem value="our value here">Label</MenuItem>
                                 ^^^^^
                                 // label of selected item is missing

Currently there's no way around accessing Label text, hence users should create some mapper for displayed value.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

rednerValue() prop should be given 'label' data somehow

Examples 🌈

<Select
  ...
  renderValue={(value, label /* this is just my proposal */) => (<option value={value}>{label}</option>)}
/>

Motivation 🔦

I want to utilize label information inside of renderValue() callback

[siriwatknp]

Thanks for the feedback but I don't think the library should provide that because there is afford to find the label related to the value.

I think this work should be on the consumer side, like this:

<Select
  ...
  renderValue={value => {
    const item = items.find(({ value: v }) => v === value ); 
    return item.label
  }}
/>

cc @mnajdova @michaldudak for other opinions.

[ifndefdeadmau5]

@siriwatknp Thanks for the quick response. I thought this could be pretty handy and could eliminate fair amount of look-up code but I always support what you guys towards to regarding API design :)

[michaldudak]

Agree with @siriwatknp - this is pretty simple to implement on the application side and if done in the library, it would also impact the developers who don't need it.

[mnajdova]

Agree, I am closing since instructions on how it can be achieved has been provided.

[nishantdotcom]

But in single select ,How can i implement RenderValue()?

[m-awais-kwanso]

But in single select ,How can i implement RenderValue()?

@nishantdotcom had you find any way around for single select ?