React 18 , handling events (6)

React
1

the problem came from TS , complaning in this code:
onclick: {handleclick}

//the function
const handleclick = (event: MouseEvent) => console.log(event);

the complaning message:

type ‘(event: MouseEvent) => void’ is not assignable to type ‘MouseEventHandler’.
Types of parameters ‘event’ and ‘event’ are incompatible.
Type ‘MouseEvent<HTMLLIElement, MouseEvent>’ is missing the following properties from type ‘MouseEvent’: offsetX, offsetY, x, y, and 14 more.ts(2322)
index.d.ts(1521, 9): The expected type comes from property ‘onClick’ which is declared here on type ‘DetailedHTMLProps<LiHTMLAttributes, HTMLLIElement>’

2

Sounds like TypeScript is complaining because it can’t infer the type of your function.

Either call your handleclick function inside an arrow function: onClick={(event) => handleclick(event)} or add the MouseEventHandler type to your handleclick function: handleclick: MouseEventHandler = (event) => console.log(event);