Version 7.0.0 is a complete TypeScript rewrite. While runtime behavior is largely unchanged, several TypeScript-specific breaking changes require updates to your code.

Migration Steps:

1. Update dependencies:

   npm install react-final-form@^7.0.0 final-form@^5.0.0

2. Fix compilation errors in the following order:
   • Handle optional boolean properties in FormState using nullish coalescing (e.g., ?? false).
   • Replace FieldMetaState imports with FieldRenderProps['meta'].
   • Replace AnyObject imports with a local Record<string, any> definition.
   • Remove generics from UseFieldConfig<T> (use UseFieldConfig instead).
   • Remove arbitrary props (like style or className) from the <Form> component; move them to a wrapper <div> or the inner <form> element.
3. Update mocks/tests:
   • Add asyncErrors: {} to InternalFormState mocks.
   • Cast mutators using as unknown as Mutator if type errors occur.

React Final Form does not include field arrays in the core package to keep the bundle size small. To use <FieldArray/>, you must install final-form-arrays and react-final-form-arrays.

Setup Requirements:

• You must pass mutators={{ ...arrayMutators }} to the <Form/> component.
• The form object in the render prop will then contain injected mutators like push and pop.
• <FieldArray/> provides a fields array that you can map over to render individual <Field/> components using the field name (e.g., ${name}.fieldName).

import arrayMutators from 'final-form-arrays'
import { FieldArray } from 'react-final-form-arrays'

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    mutators={{ ...arrayMutators }}
  >
    {({
      handleSubmit,
      form: {
        mutators: { push, pop }
      }
    }) => (
      <form onSubmit={handleSubmit}>
        <button type="button" onClick={() => push('customers', undefined)}>
          Add Customer
        </button>
        <button type="button" onClick={() => pop('customers')}>
          Remove Customer
        </button>
        <FieldArray name="customers">
          {({ fields }) =>
            fields.map((name, index) => (
              <div key={name}>
                <label>Cust. #{index + 1}</label>
                <Field
                  name={`${name}.firstName`}
                  component="input"
                />
              </div>
            ))
          }
        </FieldArray>
      </form>
    )}
  </Form>
)

To handle form submission, follow these three steps:

1. Define onSubmit: Provide an onSubmit function to the <Form/> component. This function receives the form values and is only called if all validation passes.
2. Render the form: Use the render or children prop to access the form state and functionality.
3. Use handleSubmit: Use the handleSubmit function provided by the render props as the onSubmit handler for your HTML <form> element. handleSubmit automatically calls event.preventDefault() to prevent the default browser submission.

Basic pattern:

<Form onSubmit={onSubmit}>
  {props => (
    <form onSubmit={props.handleSubmit}>
      {/* ... fields ... */}
      <button type="submit">Submit</button>
    </form>
  )}
</Form>

<Form onSubmit={onSubmit}>
  {props => (
    <form onSubmit={props.handleSubmit}>

      ... fields go here...

      <button type="submit">Submit</button>
    </form>
  )}
</Form>

If you need to trigger a form submission from a component located outside the <Form> tree, you can use one of the following methods:

1. Use the HTML form attribute

Assign an id to your <form> and reference that ID in the form attribute of your submit button.

2. Dispatch a DOM event

Use document.getElementById() to find the form and dispatch a submit event. Note: Do not use .submit(), as it will not trigger React's event handlers. You must use dispatchEvent with a cancelable, bubbling event.

3. Use a Closure

Capture the handleSubmit function provided by the render prop in a variable defined in an outer scope. To ensure the closure is correctly updated, call the function via an arrow function in the button's onClick handler.

4. Redux Dead Drop

If using Redux, you can implement the Redux Dead Drop pattern.

// Method 1: HTML form attribute
<button type="submit" form="myForm">Submit</button>
<form id="myForm" onSubmit={handleSubmit}>
  ...fields go here...
</form>

// Method 2: Dispatching DOM event
<button onClick={() => {
  document.getElementById('myForm')
  .dispatchEvent(new Event('submit', { cancelable: true, bubbles:true })) // ✅
}}>Submit</button>

// Method 3: Via Closure
let submit
return (
  <div>
    <button onClick={event => submit(event)}>Submit</button> // ✅
    <Form
      onSubmit={onSubmit}
      render={({ handleSubmit }) => {
        submit = handleSubmit
        return <form>...fields go here...</form>
      }}
    />
  </div>
)