22

I am writing a react application in typescript where I am trying to handle both right click and left click.

This is my interface

interface ButtonProps {
    value: CellValue;
    state: CellState;
    row: number;
    col: number;
    onClick(rowParam: number, colParam: number) : (e: React.MouseEvent) => void;
    onContext(rowParam: number, colParam: number) : (e: React.MouseEvent) => void;
} 

Now I have declared the callback function like

const handleContextMenu = (rowParam: number, cellParam: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) : void => {
      e.preventDefault();
}

and finally declared my component like

<Button 
  key={`${rowIndex}*${cellIndex}`} 
  value={cell.value} 
  state={cell.state} 
  onClick={handleCellClick}
  onContext={handleContextMenu}
  row={rowIndex} 
  col={cellIndex} 
/>

But I get an error

Type '(rowParam: number, cellParam: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void' is not assignable to type '(rowParam: number, colParam: number) => (e: MouseEvent<Element, MouseEvent>) => void'.
  Type '(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void' is not assignable to type '(e: MouseEvent<Element, MouseEvent>) => void'.
    Types of parameters 'e' and 'e' are incompatible.
      Type 'MouseEvent<Element, MouseEvent>' is not assignable to type 'MouseEvent<HTMLDivElement, MouseEvent>'.
        Type 'Element' is missing the following properties from type 'HTMLDivElement': align, accessKey, accessKeyLabel, autocapitalize, and 111 more.  TS2322

    53 |                 state={cell.state} 
    54 |                 onClick={handleCellClick}
  > 55 |                 onContext={handleContextMenu}
       |                 ^
    56 |                 row={rowIndex} 
    57 |                 col={cellIndex} 
    58 |             />

I don't know much about typescript but according to me HTMLDivElement should be of type HTMLElement right?

1
  • I don't know much about typescript either, but it seems to me that the parameter on both onclick and onContext should be the event object. You have some (rowParam: number, colParam: number) params
    – i.brod
    Commented Mar 1, 2020 at 1:36

3 Answers 3

35

Solution

Change from HTMLDivElement to Element solve your problem.

// Before
const handleContextMenu = (...) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) : void => {
  ...
}
// After
const handleContextMenu = (...) => (e: React.MouseEvent<Element, MouseEvent>) : void => {
  ...
}

Explanation

The hierarchy relationship is as below:

⌞Element
  ⌞HTMLElement
    ⌞HTMLDivElement

The error message is showing something like:

Type 'Element' is missing the following properties from type 'HTMLDivElement': align, accessKey, accessKeyLabel, autocapitalize, and 111 more. TS2322

This is telling that there are some props that belong to Element could not be found in HTMLDivElement.

1
  • 2
    It happened to me that I did not use React.MouseEvent, nor did I import MouseEvent explicitly from 'react'. Then TS screams that MouseEvent is not generic (some other interface).
    – BairDev
    Commented Sep 1, 2022 at 15:36
9

So, for those people who are getting

Type 'MouseEvent' is not generic.

Make sure you are importing from React

import { MouseEvent } from 'react';

or

React.MouseEvent<HTMLButtonElement>

0
1

I am not an expert of typescript, but I guess when you are specifically saying about element, i.e. React.MouseEvent Then you should use it in that particular element. Like, you are using it on your button, so you should write, React.MouseEvent (replace Div to Button as you are using it on your button) or if you don't want restricted handling, then you can simply use :MouseEvent (Btw someone correct me if I am wrong. From my knowledge that's the answer.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.