Faced error of No overload matches this call in React Typescript

Question

I was creating React project and faced and I have a form component and it has onSubmit event which shows an error of "No overload matches this call". Here is the code: <StyledForm onSubmit={this.handleSave}>{children}</StyledForm>.

Here onSubmit shows an error of No overload matches this call.
Overload 1 of 2, '(props: Pick & StyledComponentProps, context?: any): ReactElement ReactElement Component)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error. Type '(authorizeRequired?: boolean | undefined) => void' is not assignable to type '(event: FormEvent) => any'. Types of parameters 'authorizeRequired' and 'event' are incompatible. Type 'FormEvent' is not assignable to type 'boolean | undefined'. Type 'FormEvent' is not assignable to type 'true'. Overload 2 of 2, '(props: PropsWithChildren & StyledComponentProps>, context?: any): ReactElement ReactElement Component<...>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error. Type '(authorizeRequired?: boolean | undefined) => void' is not assignable to type '(event: FormEvent) => any'.ts(2769) StyledForm.tsx(25, 5): The expected type comes from property 'onSubmit' which is declared here on type 'IntrinsicAttributes & Pick & StyledComponentProps' StyledForm.tsx(25, 5): The expected type comes from property 'onSubmit' which is declared here on type 'IntrinsicAttributes & Pick & StyledComponentProps & { children?: ReactNode; }'

The code of handleSave:

handleSave = (authorizeRequired?: boolean) => {
        const { mode, isNewDataSource, form, saveHandler } = this.props;
        const data = mergeAll<any>([
            form.value,
            {
                isNew: mode === DSFormMode.create,
                isNewDataSource,
            },
        ]);

        saveHandler(data, authorizeRequired);
    };

The code for StyledForm:

interface Props extends WithStyles<typeof styles> {
    children: ReactNode;
    onSubmit?(event: FormEvent); // here it shows error of 'onSubmit', which lacks return-type annotation, implicitly has an 'any' return type
}
const StyledFormRoot = ({ classes, children, onSubmit = identity }: Props) => (
    <form className={classes.container} onSubmit={onSubmit}>
        {children}
    </form>
);
export const StyledForm = withStyles(styles)(StyledFormRoot);

If something is not clear please let me know

João Eler João Eler · Accepted Answer · 2020-04-21T17:29:25

changing that onSubmit on the interface to (event: FormEvent<HTMLFormElement>) should do it

with a ctrl + click on the onSubmit you can see what is it that is expected to return

I always find myself in trouble with types too :/

Faced error of No overload matches this call in React Typescript

1 Answers