React final form not working with typescript

Question

I want to create a react final form in a react-typescript environment. I get an error that I am missing "onSubmit" property in type {...} required by "FormProps". I checked the interface but can't figure why I am getting this error because I have that property set in place and defined.

myfile.tsx

import * as React from 'react';
import { Form, Field } from 'react-final-form';

export default class MyComponent extends React.Component {
  constructor(props: any) {
    super(props);

    this.onSubmitHandler = this.onSubmitHandler.bind(this);
    this.validateHandler= this.validateHandler.bind(this);
  }

   onSubmitHandler(): void {
   }

   validateHandler(): void {

   }

  render(): React.ReactNode {
    return (
      <div>
        <Form>
          onSubmit={this.onSubmitHandler} // OK
          validate={this.validateHandler}
          render={ ( {handleSubmit, pristine, invalid} ) => (
              <form onSubmit={handleSubmit}>


                <button type="submit" disabled={pristine || invalid}>
                  Submit
                </button>
              </form>
           )}
        </Form>
      </div>
    );
  }
}

index.d.ts (react final form) - FormProps => Config => ...onSubmit

export const Form: React.ComponentType<FormProps>;

export interface FormProps extends Config, RenderableProps<FormRenderProps>{
  subscription?: FormSubscription;
  decorators?: Decorator[];
  initialValuesEqual?: (a?: object, b?: object) => boolean;
}

export interface Config<FormData = object> {
  debug?: DebugFunction
  destroyOnUnregister?: boolean
  initialValues?: object
  keepDirtyOnReinitialize?: boolean
  mutators?: { [key: string]: Mutator }
  onSubmit: (
    values: FormData,
    form: FormApi,
    callback?: (errors?: object) => void
  ) => object | Promise<object | undefined> | undefined | void
  validate?: (values: object) => object | Promise<object>
  validateOnBlur?: boolean
}

Answer 1

Props should be provided inside the opening tag of an element.Change your render method to this.

render(): React.ReactNode {
  return (
    <div>
      <Form 
        onSubmit={this.onSubmitHandler} // OK
        validate={this.validateHandler}
        render={ ( {handleSubmit, pristine, invalid} ) => (
          <form onSubmit={handleSubmit}>
            <button type="submit" disabled={pristine || invalid}>
              Submit
            </button>
          </form>
        )}>  
      </Form>
    </div>
  );
}