How to get propperly FormState (dirtyFields, prestine, etc.) in handleSubmit function using React-Final-Form

Question

Basically, I just want to get only that fields, that were changed (dirty). How should I get them inside submit handler? (I need to post only changed fields to API)

const handleSubmitSettings = (fields, formApi) => {
    console.log("Submitted with fields:", fields);
};

const handleValidate = (props) => {
    console.log("Validated with props:", props);
};

return (
    <Form
        onSubmit={handleSubmitSettings}
        validate={handleValidate}
    >
        {({handleSubmit,form: {submit, change}}) => (
                <form onSubmit={handleSubmit} className={classes.formFlexContainer}>
                    <SettingsHeader/>
                    <SettingsContainer/>
                </form>
        )}
    </Form>
);

Answer 1

In your submit handler you could retrieve all registered fields via the second argument formApi, then collect all fields marked dirty:

const onSubmit = async (values, api) => {
  const dirtyOnly = {};
  for (let field of api.getRegisteredFields()) {
    const fs = api.getFieldState(field)
    if (fs.dirty) {
      dirtyOnly[fs.name] = fs.value;
    }
  }
  // submit dirtyOnly
}

in the example above, dirtyOnly object would contain all values from dirty fields. But such an approach seems questionable since it may not properly handle a case with more complex state shapes.