Correctly declare callback method in Typescript for React Bootstrap DropdownItem

Question

I have problems in declaring callback for onClick property in Dropdown.Item in Typescript. What type event should be. I tried many versions without any luck. I know Dropdown.Item is rendered as an anchor and I want to do it correctly but couldn't find any way to declare type of event parameter. Please help me what type is e in my case. I'm trying MouseEvent<HTMLAnchorElement> but typescript is complaining? What correct type should I use in this place? Of course everything is inside Function Component body etc... but I just extracted my problem here...

import React, { MouseEvent } from 'react';
import { Dropdown } from 'react-bootstrap';

const handleClick = ( e: MouseEvent<HTMLAnchorElement> ) => {
    e.preventDefault();
    // Do something
  };

<Dropdown.Item href="#" role="button" onClick={ handleClick }>
  Item
</Dropdown.Item>

Typescript is complaining with this message:

Type '(e: MouseEvent<HTMLAnchorElement>) => void' is not assignable to type '(event: MouseEvent<ReplaceProps<BsPrefixComponentClass<"a", SafeAnchorProps>, BsPrefixProps<BsPrefixComponentClass<"a", SafeAnchorProps>> & DropdownItemProps>, MouseEvent>) => void'.
      Types of parameters 'e' and 'event' are incompatible.

Should I put all this crazy and long declaration in my callback declaration?

could you please include the codesandbox

Sarun UK
– Sarun UK

2020-10-01 18:46:20 +00:00
Commented Oct 1, 2020 at 18:46 — Sarun UK
– Sarun UK, Commented Oct 1, 2020 at 18:46

Lesiak · Accepted Answer · 2020-10-01 19:10:17Z

5

Check the definition of DropdownItem:

import React from 'react';
import SafeAnchor from './SafeAnchor';
import { BsPrefixPropsWithChildren, BsPrefixRefForwardingComponent, SelectCallback } from './helpers';
export interface DropdownItemProps extends BsPrefixPropsWithChildren {
    active?: boolean;
    disabled?: boolean;
    eventKey?: string;
    href?: string;
    onClick?: React.MouseEventHandler<this>;
    onSelect?: SelectCallback;
}
declare type DropdownItem = BsPrefixRefForwardingComponent<typeof SafeAnchor, DropdownItemProps>;
declare const DropdownItem: DropdownItem;
export default DropdownItem;

Using the definition of React.MouseEventHandler,

type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;

you arrive to:

import React from 'react';
import { Dropdown } from 'react-bootstrap';
import { DropdownItemProps} from 'react-bootstrap/DropdownItem';

const handleClick = ( e: React.MouseEvent<DropdownItemProps>) => {
  e.preventDefault();
  // Do something
};

edited Oct 1, 2020 at 19:10

answered Oct 1, 2020 at 18:56

Lesiak

26.6k2 gold badges55 silver badges79 bronze badges

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

2 Comments

Marcin Kapusta Over a year ago

Thanks Lesiak. Polish Developers rules. Dzięki za wytłumaczenie jak krowie na rowie. Next time when I will have similar problems I will know how to handle it. Thanks!

Istiaque Ahmed Over a year ago

@Lesiak, may I ask you to have a look at a react-bootstrap related question here - stackoverflow.com/questions/64359611/… ?

Collectives™ on Stack Overflow

Correctly declare callback method in Typescript for React Bootstrap DropdownItem

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related