Can I specify a Divider or Header in Semantic UI React's options array for the dropdown component?

Question

I am working with ReactJS and using SemanticUI for ReactJS to style the front end,

Is it possible to specify a header ordivider from within the options array of objects for a dropdown component?

I get the impression from the documentation that this is not supported yet.

Answer 1

I solved this by changing to object in the options array to have more properties (which allow you to customise the content):

        {
            text: "YouGov Filters",
            value: "yougov-header",
            content: <Header content="YouGov Filters" color="teal" size="small" />,
            disabled: true
        },

It's probably not the ideal way to achieve what I want because I have to set disabled to true (I don't want it to be a selectable option) which means it adopts the greyed out 'disabled' style. I tried to counter this by specifying a color for the header which resulted in the disabled style being applied over the teal colour, not perfect but it will do for now.

Answer 2

Another workaround is to do it by map array:

const options = [
    {
        text: "note",
        icon: 'sticky note outline',
        description: 'test',
    },
    {
        divider: true
    },
    {
        text: "task",
        icon: 'calendar check outline',
        description: 'test',
    },

];

return (
    <Dropdown className='multicontent__button' text='add new' button>
        <Dropdown.Menu>
            <Dropdown.Header icon='tags' content='Tag Label' />
            {options.map((option, i) => {
                if (option.divider === true) return (<Dropdown.Divider key={i}/>);
                return (
                    <Dropdown.Item
                        key={i}
                        text={option.text}
                        icon={option.icon}
                        description={option.description}
                        action={option.action}
                        onClick={this.handleOption}
                    />
                );
            })}
        </Dropdown.Menu>
    </Dropdown>
);

Answer 3

Mr B's solution is genius. And it can be cleaner with a little modification of his:

function FragmentWithoutWarning({key, children}) {
  // to get rid of the warning:
  // "React.Fragment can only have `key` and `children` props."
  return <React.Fragment key={key}>{children}</React.Fragment>;
}

// then just:

{
  as: FragmentWithoutWarning,
  content: <Header content="YouGov Filters" color="teal" size="small" />
}

Since <React.Fragment /> is not able to capture any event, you even don't have to disable the item.