I created a custom component, and try to pass an async function to it in this way:

// compiler error: ';' expected 
export const MyDialog = ({ onDeleting: async (id: string) => Promise<void> }) => {
  ...
  return <>
      ...
     // Compiler error: Cannot find name 'onDeleting'.
     <Button onClick={onDeleting}>OK</Button>
  <>
}

But I get two errors:

1. The component's arrow function expect a semicolon somewhere
2. The Button onclick callback complains Cannot find name 'onDeleting'.

Where do I miss?

CodePudding user response：

You used a wrong syntax

export const MyDialog = ({ onDeleting }: { onDeleting: (id: string) => Promise<void> }) => {
  ...
  return <>
      ...
     // Compiler error: Cannot find name 'onDeleting'.
     <Button onClick={onDeleting}>OK</Button>
  <>
}

CodePudding user response：

You're assigning onDeleting to something else, not setting default function (if it's what you expect) so it would be

export const MyDialog = ({
  onDeleting = async id => Promise
}) => {
...
}