Semantic-UI / ReactJS | Use DropDown as group

Question

I'm using Semantic-UI/ReactJS and want to use DropDown component as group but there is not such option, but I googled, and find a fiddle that provide this but in standalone semantic ui not for reactjs, how can I use dropdown as group?

<Dropdown
    id="Province"
    search selection clearable
    options={this.state.ProvinceData && this.state.ProvinceData.map(v => {
        return {
            key: v.id,
            text: v.name,
            value: v.id
        }
    })}
    onChange={this.getProvince}
    placeholder="-- Choose --"
    value={this.state.provinceValue}
    noResultsMessage={'Not Found!'}
/>

Answer 1

Dropdown component with children can not have "selection" property and that is the problem. Although You can "hack" it. Note that this is not a "clean" solution, but visually makes difference.

Let's say your "options" array of objects is like this:

[
  {
    key: v.id,
    text: v.name,
    value: v.id
  },
  ...
]

You can create a simple React Component and style it as You wish:

const OptGroupHeader = props => {
  const { header } = props
    return (
      <div>
        <hr />
        <strong><i>{ header }</i></strong>
       <hr />
      </div>
    )
  }

Now what you can do is provide it as a disabled option where you want to use your header.

options.splice(x, 0, {
  key: 'key - xxx', 
  value: 'value', 
  text: (<OptGroupHeader header='My Fancy Header' />), 
  disabled: true
})

A component inside the "text" property will be rendered.