onClick event problem- next.js and typescript

Question

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 !

debugmode · Accepted Answer · 2021-05-28 16:11:07Z

1

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.

answered May 28, 2021 at 16:11

debugmode

361 bronze badge

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

Collectives™ on Stack Overflow

onClick event problem- next.js and typescript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related