How can I handle errors in React Final Form?

How can I handle errors in React Final Form?

You can handle errors in React Final Form by using the validate prop in your form component. This prop allows you to define a validation function that checks the values of your form fields and returns an object containing error messages.

Can you show me an example of a validation function?

Sure! Here's a simple example:

const validate = values => {
  const errors = {};
  if (!values.email) {
    errors.email = 'Required';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  return errors;
};

This function checks if the email field is empty or if it has an invalid format.

How do I display these error messages in the form?

You can display error messages by accessing the errors object provided by React Final Form. For example:

<Field name="email">
  {({ input, meta }) => (
    <div>
      <input {...input} type="email" placeholder="Email" />
      {meta.error && meta.touched && <span>{meta.error}</span>}
    </div>
  )}
</Field>