Office React Fabric Event Declared But Never Used Demo Code Error

Question

When using the Microsoft sample code for the React Office Fabric UI I am getting the error.

TS6133: 'event' is declared but its value is never read.

Code: https://developer.microsoft.com/en-us/fabric#/controls/web/dropdown

Code Pen: (No Error) https://codepen.io/pen/?&editable=true

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

export interface IDropdownControlledMultiExampleState {
  selectedItems: string[];
}

export class DropdownControlledMultiExample extends React.Component<{}, IDropdownControlledMultiExampleState> {
  public state: IDropdownControlledMultiExampleState = {
    selectedItems: []
  };

  public render() {
    const { selectedItems } = this.state;

    return (
      <Dropdown
        placeholder="Select options"
        label="Multi-select controlled example"
        selectedKeys={selectedItems}
        onChange={this._onChange}
        multiSelect
        options={[
          { 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' }
        ]}
        styles={{ dropdown: { width: 300 } }}
      />
    );
  }

  private _onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    const newSelectedItems = [...this.state.selectedItems];
    if (item.selected) {
      // add the option if it's checked
      newSelectedItems.push(item.key as string);
    } else {
      // remove the option if it's unchecked
      const currIndex = newSelectedItems.indexOf(item.key as string);
      if (currIndex > -1) {
        newSelectedItems.splice(currIndex, 1);
      }
    }
    this.setState({
      selectedItems: newSelectedItems
    });
  };
}

My use is no different, just implemented outside codepen. I have found the same with all the sample code. What else should be used to utilize the event?

score 0 · Accepted Answer · answered May 09 '19 at 13:17

You shouldn't really force yourself to utilize it. An example might be where the _onChange handler is being used for bunch of other forms as well and a need might arise to look into the event object to see where is it coming from etc..

See here: Ignore TS6133: "(import) is declared but never used"?

You need to turn-off the noUnusedLocals option from your tsconfig.json for the error to disappear.

Office React Fabric Event Declared But Never Used Demo Code Error

1 Answers1