How can I implement async validation in React Final Form?

How can I implement async validation in React Final Form?

You can implement async validation in React Final Form by using the validate prop in your field components. This allows you to perform asynchronous checks, such as checking if a username is already taken.

Can you show me a code example for that?

Sure! Here's a simple example:

const validateUsername = async (value) => {
  const response = await fetch(`/api/check-username?username=${value}`);
  const data = await response.json();
  return data.isTaken ? 'Username is already taken' : undefined;
};

<Field name="username" validate={validateUsername}>
  {({ input, meta }) => (
    <div>
      <input {...input} placeholder="Username" />
      {meta.error && meta.touched && <span>{meta.error}</span>}
    </div>
  )}
</Field>

What if I want to validate multiple fields asynchronously?

You can create a separate validation function for each field or combine them into a single function that returns an object with errors for each field. Just ensure each field's validation is handled independently.