Showing errors returned via API - React Final Form

Question

I am trying to display inline errors returned via API, for each invalid field. I am following the Submission Errors example from here with something like this:

const handleSubmit = async (values) => {
  let errors;

  await createProduct(values) // axios.post(...)
    .then((res) => ...)
    .catch((error) => {
      errors = error.response.data.errors;
      console.log(errors); // returns { title: ["can't be blank"] }
    });

  return errors; // returns { title: ["can't be blank"] }
}

then my form looks like this:

   <Form onSubmit={handleSubmit}>
        {({
          submitError,
          handleSubmit,
          ...
        }) => (
          <BSForm onSubmit={handleSubmit}> // BSForm for boostrapform
            {submitError && (
              <div className="error">{submitError}</div> // not showing
            )}
            {console.log(submitError)} // returns 'undefined'
            <TextField
              name="title"
              ...
            />

and I am only able to invoke submitError if I pass {[FORM_ERROR]: 'error message'} instead of returning the errors obj.

I'd love to be able to just relay these API errors into corresponding fields' meta: { error } props, but I can totally live with submitError wrapping API errors.

Answer 1

Found the solution 30 seconds after posting. I missed the meta: { submissionError } prop in the example.

So the way I am returning errors seems to be correct, the only difference is instead of displaying Field level errors with meta.error && meta.touched, I have to add meta.submitError like so:

(meta.error || meta.submitError) && meta.touched; 

then to display the error:

{(meta.error || meta.submitError) && meta.touched && (
  <span>{meta.error || meta.submitError}</span>
)}