CODEWITHSUNDEEP
reactjstypescriptnext.js
Diego
Diego

Reputation: 691

onClick event problem- next.js and typescript

In the process of developing an app, in the fronted, i'm facing a weird problem with the onClick function, which is the following

Type '(e: SyntheticEvent<Element, Event>) => void' is not assignable to type 'CustomValueType | MotionValue<number> | MotionValue<string> | MotionValue<any> | ((event: MouseEvent<{}, MouseEvent>) => void)'.
  Type '(e: SyntheticEvent<Element, Event>) => void' is not assignable to type '(event: MouseEvent<{}, MouseEvent>) => void'.
    Types of parameters 'e' and 'event' are incompatible.
      Type 'MouseEvent<{}, MouseEvent>' is not assignable to type 'SyntheticEvent<Element, Event>'

And these are the onClick functions where this error appears

onClick={(e: SyntheticEvent) => {
                          setDeleteAddOptions(!deleteAddOptions),
                            e.stopPropagation();
}}


onClick={(e: SyntheticEvent) => e.stopPropagation()}

Maybe is a type definition problem? What can i do to solve it?

Thanks for your time !

Upvotes: 1

Views: 3050

Answers (1)

debugmode
debugmode

Reputation: 36

As the error says. you are trying to assign a type of Synthetic event to a component that expects a MouseEvent. Just swap out SyntheticEvent for MouseEvent and you should be good.

Upvotes: 1

Related Questions