ESLint reports "Promise-returning function provided to attribute where a void return was expected" [duplicate]

Question

I have a React application that is giving a linting error:

Promise-returning function provided to attribute
where a void return was expected
.eslint@typescript-eslint/no-misused-promises

The function looks like this

      <Button onClick={
        async () => {
          await handleDelete()
        }}
      >

I've tried adding return void along with a number of different ways to wrap the code and add catch as suggested in various SO posts but none of them worked to resolve the error.

I do not wish to disable the rule without understanding why - and once I do it will probably be to remove or disable the rule in the lint config.

Answer 1

There are two approaches here:

1. You could either wrap the function in an IIFE (Immediately Invoked Function Expression),

     <Button onClick={
         () => {
             void (async () => {
                 await handleDelete()
             })();
          }
      }>

You can learn more about IIFE on: MDN Official Docs

2. Or, you could disable the no-misused-promises rule.

For project wide, add rule in .eslintrc:

{
  "@typescript-eslint/no-misused-promises": [
    "error",
    {
      "checksVoidReturn": false
    }
  ]
}

To disable this inline, comment this above the particular occurrence to ignore the error.

// eslint-disable-next-line @typescript-eslint/no-misused-promises

You could read about it more on: GitHub ESLint Docs