How to convert function component to class component in fluent UI?

Question

I am creating multi select drop down in Office fabrics.I saw the code.It contain the functional component.I want to change in class component.and How can we store the selected options in state variable? please guide me.I am new in spfx share-point.

Code given below:-

import * as React from 'react';
import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownStyles } from 'office-ui-fabric-react/lib/Dropdown';

const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 300 } };

const DropdownControlledMultiExampleOptions = [
  { key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'orange', text: 'Orange', disabled: true },
  { key: 'grape', text: 'Grape' },
  { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
  { key: 'vegetablesHeader', text: 'Vegetables', itemType: DropdownMenuItemType.Header },
  { key: 'broccoli', text: 'Broccoli' },
  { key: 'carrot', text: 'Carrot' },
  { key: 'lettuce', text: 'Lettuce' },
];

export const DropdownControlledMultiExample: React.FunctionComponent = () => {
  const [selectedKeys, setSelectedKeys] = React.useState<string[]>([]);

  const onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    if (item) {
      setSelectedKeys(
        item.selected ? [...selectedKeys, item.key as string] : selectedKeys.filter(key => key !== item.key),
      );
    }
  };

  return (
    <Dropdown
      placeholder="Select options"
      label="Multi-select controlled example"
      selectedKeys={selectedKeys}
      onChange={onChange}
      multiSelect
      options={DropdownControlledMultiExampleOptions}
      styles={dropdownStyles}
    />
  );
};

Answer 1

You can do the following:

export class DropdownControlledMultiExample extends React.Component {
  state = {
    selectedKeys: []
  }

  onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    if (item) {
      this.setState({
        selectedKeys:
          item.selected
            ? [...this.state.selectedKeys, item.key as string]
            : this.state.selectedKeys.filter(key => key !== item.key),
      });
    }
  };
  render() {
    return (
      <Dropdown
        placeholder="Select options"
        label="Multi-select controlled example"
        selectedKeys={this.state.selectedKeys}
        onChange={this.onChange}
        multiSelect
        options={DropdownControlledMultiExampleOptions}
        styles={dropdownStyles}
      />
    );
  }
};