props.mutators is deprecated

Question

My code is working, but I got a warning :

Warning: As of React Final Form v3.3.0, props.mutators is deprecated and will be removed in the next major version of React Final Form. Use: props.form.mutators instead. Check your ReactFinalForm render prop.

with this exemple :

https://codesandbox.io/s/kx8qv67nk5

   return   <Form
            onSubmit={() => console.log('ok')}
            mutators={{
                ...arrayMutators
            }}
            initialValues={ {customers: [{firstName: 'a', lastName: 'b'}]} }
            render={({
                         handleSubmit,
                         mutators: { push, pop }, // injected from final-form-arrays above
                         pristine,
                         reset,
                         submitting,
                         values
                     }) => {
                return (
                    <form onSubmit={handleSubmit}>
                        <div className="buttons">
                            <button
                                type="button"
                                onClick={() => push('customers', undefined)}>
                                Add Customer
                            </button>
                        </div>
                        <FieldArray name="customers">
                            {({ fields }) =>
                                fields.map((name, index) => (
                                    <div key={name}>
                                        <label>Cust. #{index + 1}</label>
                                        <Field
                                            name={`${name}.firstName`}
                                            component="input"
                                            placeholder="First Name"
                                        />
                                        <Field
                                            name={`${name}.lastName`}
                                            component="input"
                                            placeholder="Last Name"
                                        />
                                        <GithubField name="user1" onSearch={(item) => {
                                            this.api.getByFirstname(item).then(result => console.log(result));
                                        }} />
                                        <span
                                            onClick={() => fields.remove(index)}
                                            style={{ cursor: 'pointer' }}>❌</span>
                                    </div>
                                ))}
                        </FieldArray>

                        <div className="buttons">
                            <button type="submit" disabled={submitting || pristine}>
                                Submit
                            </button>
                            <button
                                type="button"
                                onClick={reset}
                                disabled={submitting || pristine}>
                                Reset
                            </button>
                        </div>
                        <pre>{JSON.stringify(values, 0, 2)}</pre>
                    </form>
                )
            }}
        />

How to do the right way ?

Answer 1

The warning already tells you what to do.

You must use form.mutators instead of just mutators

To do so, you can change your code from

mutators: { push, pop }

to

form: { mutators: { push, pop  } }