onError and useForm errors behaviour for React

[martinszemitis]

Huh...

After spending few mornings on the issue I finally found how onError and useForm should be used with the current React adapter version.

Steps to reproduce the problem:

• load component the first time
• input data to fail validations

Outcome:

• onError is triggered

• global errors object is empty

• but when you fail validation a second time, the errors object is filled with error messages

Solution:

• for now, you always have to use errors passed into onError

This code will not reset form fields the first time you load a component and enter the wrong data:

const { data, setData, put, processing, errors, reset } = useForm({
        current_password: '',
        password: '',
        password_confirmation: '',
    });

function submit(event) {
        event.preventDefault();
        put(route('user-password.update'), {
            onSuccess: () => {
                reset();
            },
            onError: () => {
                if (errors.password) {
                    reset('password', 'password_confirmation');
                }
                if (errors.current_password) {
                    reset('current_password');
                }
            },
        });
    }

This will work every time:

const { data, setData, put, processing, errors, reset } = useForm({
        current_password: '',
        password: '',
        password_confirmation: '',
    });

function submit(event) {
        event.preventDefault();
        put(route('user-password.update'), {
            onSuccess: () => {
                reset();
            },
            onError: (errors) => {
                if (errors.password) {
                    reset('password', 'password_confirmation');
                }
                if (errors.current_password) {
                    reset('current_password');
                }
            },
        });
    }

Why it took so long for me to find it? I was looking at Jetstream Vue implementation, and it uses global errors object and it works.

@claudiodekker, @reinink is it because of React-specific behavior that it doesn't work the same as for Vue?

I think some examples in the documentation for onError usage with errors passed in, would be a great addition.