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

Is it possible to specify a header or divider from within the options array of objects for a dropdown ponent?

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

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

Is it possible to specify a header or divider from within the options array of objects for a dropdown ponent?

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

• javascript
• reactjs
• semantic-ui-react

3 Answers 3

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.

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.

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>
);