Dropdown renderLabel expects a ReactElement<any> to be returned

[raptoria]

According to the example, renderLabel returns an object, so I'm a little confused as to why the Type definition requires a ReactElement. I can't get the example to compile with TypeScript.

Any ideas?

Version
0.67.2

ERROR in ./src/components/Menu/ComponentGroupMenu/ComponentGroupMenu.tsx
(37,11): error TS2322: Type '(item: DropdownItemProps, index: number, label: LabelProps) => { color: string; content: string; ...' is not assignable to type '((item: DropdownItemProps, index: number, defaultLabelProps: LabelProps) => ReactElement<any>) | ...'.
  Type '(item: DropdownItemProps, index: number, label: LabelProps) => { color: string; content: string; ...' is not assignable to type '(item: DropdownItemProps, index: number, defaultLabelProps: LabelProps) => ReactElement<any>'.
    Type '{ color: string; content: string; icon: string; }' is not assignable to type 'ReactElement<any>'.
      Property 'type' is missing in type '{ color: string; content: string; icon: string; }'.

code:

public render() {
     const options = [
      { key: 1, text: 'Green', value: ComponentGroup.GREEN },
      { key: 2, text: 'Red', value: ComponentGroup.RED },
      { key: 3, text: 'Blue', value: ComponentGroup.BLUE },
    ]

    const renderLabel = (item: DropdownItemProps, index: number, label: LabelProps) => ({
      color: 'blue',
      content: `Customized label - ${label.text}`,
      icon: 'check',
    });

    return (

        <Dropdown
          compact
          selection
          options={options}
          onChange={this.selectGroup} 
          placeholder='Choose an option'
          renderLabel={renderLabel}
        />
    );
  }`
```

[raptoria]

this doesn't work, either...

import {Dropdown, Label, DropdownItemProps, LabelProps} from 'semantic-ui-react';

    const renderLabel = (item: DropdownItemProps, index: number, label: LabelProps) => ({
      color: 'blue',
      content: `Customized label - ${label.text}`,
      icon: 'check',
    } as Label);

ERROR in ./src/components/Menu/ComponentGroupMenu/ComponentGroupMenu.tsx
(27,10): error TS2304: Cannot find name 'Label'.

[raptoria]

Is it possible to use renderLabel for single selection? I noticed it only works when Dropdown prop is set to 'multiple'.

[layershifter]

Is it possible to use renderLabel for single selection?

Nope, Label works only with multiselect.

According to the example, renderLabel returns an object

My fault, I will make PR that simplifies validation there.