React-select: Display both label and value in select input

[mdmusaib]

I want to display both group label and value in the select input, like from drop-down they select options means in select box it should come with group-selectedValue...

[IRediTOTO]

:| just need use map it will be done

[mdmusaib]

Can you make a small codesandbox demo

[IRediTOTO]

You have an array options like this:
[{value:"123",label:"abc},{value:"456",label:"def},{value:"789",label:"ghi}] right?
just convert it to [{value:"123",label:"abc - 123"},{value:"456",label:"def - 456"},{value:"789",label:"ghi -789"}]

Is that you mean ?

[Rall3n]

Use the formatOptionLabel prop. It exists for such purpose:

<Select formatOptionLabel={option => `${option.label} - ${option.value}`} />

[mdmusaib]

Not this one, if i try above logic, it will show both {label - value} in option list also, but I want to show both label-value in the select list not in the options list,in option list it will be normal label, if the user select option that selected value should be like {label-value} is it possible to achieve in react-select.
I tried multiple solutions not working for me, can you help to fix this.

[Rall3n]

@mdmusaib There is a second argument to the function. This argument is a meta object with a context attribute.
With this you can distinguish between the selected option and the option list.

const formatOptionLabel = (option, { context }) => context === 'value' ? `${option.label} - ${option.value}` : option.label;

<Select formatOptionLabel={formatOptionLabel} />

Possible values of the context attribute are:

• value: For display in list of selected values.
• menu: For display in list of available options.

[mdmusaib]

Thanks for the quick response, it working now, one more doubt I have is like how to give different color for only group label, if selected it should come up the same color

[ebonow]

Greetings @mdmusaib

Glad that @Rall3n was able to resolve your initial question. Regarding styling the GroupHeader, I will try to answer your concerns.

The simple use-case of adding styling to a GroupHeader, can be done via the styles prop

const styles = {
  groupHeader: (css, state) => ({ ...css, background 'red' })
}

return <Select styles={styles} ...>

To determine if a GroupHeader should be styled differently if one of the Group options is selected, is is a bit trickier, but here is one approach...

Each Group will have a GroupHeader and Options, therefore we must:

1. Create a custom Group component
2. Iterate through all of the options in the Group and identify if any are selected
3. Create a new prop for GroupHeader to identify if there are any selected options and pass that to the GroupHeader
4. Create a custom GroupHeader component which consumes this prop and applies a style if present

Fortunately, there is a prop passed to the Group called headingProps which can be overridden.

The end result can be seen below and in action at this codesandbox

const Group = (props) => {
  const hasSelectedOption = props.children.some((opt) => opt.props.isSelected);

  return (
    <components.Group
      {...props}
      headingProps={{ ...props.headingProps, hasSelectedOption }}
    />
  );
};

const GroupHeading = ({ hasSelectedOption, ...props }) => {
  const selectedStyle = {
    backgroundColor: "#2684FF",
    color: "hsl(0,0%,100%)"
  };
  const style = { ...(hasSelectedOption && selectedStyle) };
  return <components.GroupHeading {...props} style={style} />;
};

return <Select components={{ Group, GroupHeading }} options={groupedOptions} ... />;

I believe this resolves your questions, so I will close this issue. If you have any other questions or concerns, we can reopen this if necessary.