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?

Samira · Accepted Answer · 2021-06-11 13:05:29Z

4

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.

edited Jun 11, 2021 at 13:05

Samira

812 silver badges13 bronze badges

answered Sep 25, 2020 at 23:14

Tung Pham

5874 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zhihar Over a year ago

If I write eventKey: string | null then an error is displayed Type 'string | null' is not assignable to type 'string | undefined', if wite event: React.SyntheticEvent<unknown> - error: Property 'className' does not exist on type 'EventTarget'. when use event.target.className in handleSelect

Tung Pham Over a year ago

I don't get the first error where it said Type 'string | null' is not assignable to type 'string | undefined' when I tried it, what version of react-bootstrap and typescript are you using? For the second one, since the type of event.target is EventTarget, for you to get HTML attributes, you have to cast it to HTMLElement like this (event.target as HTMLElement).className

Collectives™ on Stack Overflow

onSelect event handler typescript type for react bootstrap DropDown

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related