使用 react-select 的多类别下拉菜单

Question

I want to use react-select for a multi-category dropdown list. My use-case is to be able to select one option at max from each category. I have explained the given an example below where I want one item at max selected from each category. So we may have a selection like C1I1, C2I3, and C3I1. The project I have is using react-select v2.4.4 with react v15.6.2 and material-ui. Can anyone let me know how can I implement this functionality. Also, if this is already implemented or answered, please direct me towards it.

1. Category 1

• C1I1
• C1I2
• C1I3

2. Category 2

• C2I1
• C2I2
• C2I3
• C2I4

3. Category 3

• C3I1
• C3I2

Answer 1

Created a reference pen. https://codepen.io/chris495b/pen/QWKmXKE

While implementing the select component please dont forget to add isMulti attribute and also include data in the formate shared in the link for grouping.

<Select
        onChange={this.handleChange}
        isMulti
        defaultValue={colourOptions[1]}
        options={groupedOptions}
        formatGroupLabel={formatGroupLabel}
      />