close

[Solved] Type ‘void’ is not assignable to type ((event: MouseEvent) => void) | undefined

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Type ‘void’ is not assignable to type ((event: MouseEvent) => void) | undefined in reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve Type ‘void’ is not assignable to type ((event: MouseEvent) => void) | undefined Error ?

  1. How To Solve Type 'void' is not assignable to type ((event: MouseEvent) => void) | undefined Error?

    To Solve Type 'void' is not assignable to type ((event: MouseEvent) => void) | undefined Error Just Create a new function that calls fetchData e.g. onClick={() => this.fetchData("dfd")} will solve your problem.

  2. Type 'void' is not assignable to type ((event: MouseEvent) => void) | undefined

    To Solve Type 'void' is not assignable to type ((event: MouseEvent) => void) | undefined Error Just Create a new function that calls fetchData e.g. onClick={() => this.fetchData("dfd")} will solve your problem.

Solution 1

Here this.fetchData("dfd") you are calling the function. The function returns voidvoid is not assingable to onClick which expects a function.

Just Create a new function that calls fetchData e.g. onClick={() => this.fetchData("dfd")} will solve your problem.

Solution 2

You could also do something like

fetchData = (val: string) => (event: any) => {
  alert(val);
};

Alternatively, you can set a type for your event, such as React.MouseEvent

Solution 3

With Functional Components, we use React.MouseEvent and it clears things up…

const clickHandler = () => {
  return (event: React.MouseEvent) => {
    ...do stuff...
    event.preventDefault();
  }
}

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment