onSelect event handler typescript type for react bootstrap DropDown

Question

I use React with typescript and react-bootstrap to create dropdown list:

ipc__handleSelect = (eventKey: any, event: any) => {
}

render() {

    return (
        <Dropdown>
            <Dropdown.Toggle>Text</Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item
                    key         = 'key1'
                    eventKey    = 'key1'
                    onSelect    = {this.ipc__handleSelect}
                >Item</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
}

help identify data types

event: any - what type should I write?
eventKey: any - what type should I write?

when I write eventKey: string (because the key is a string), I get error:

Type '(eventKey: string, event: any) => void' is not assignable to type 'SelectCallback'. Types of parameters 'eventKey' and 'eventKey' are incompatible. Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'.

why does null even occur there?

Tung Pham Tung Pham · Accepted Answer · 2020-09-25T23:14:55

If you look at the react-bootstrap library code, you will see that Dropdown. Item has an onSelect of type SelectCallback and SelectCallback is like this:

export type SelectCallback = (
  eventKey: string | null,
  e: React.SyntheticEvent<unknown>,
) => void;

Since you assign that your handler took in only string type and Dropdown Item onSelect gives string|null to eventKey, you got an error that it cannot be mapped.

onSelect event handler typescript type for react bootstrap DropDown

1 Answers