How to process extra errors?

[evgeniyworkbel]

`I have a form. Inputs are handled by react-hook-form, but there is feature like attaching files to form. And I have different checkings for it like file count, result file total size and etc. How to process errors? Is it good to create hidden input and manually set error to it?

There was troubles if I saved extra error in useState() hook - it's difficult to synchronize this state and form state handled by RHF. For example, I reset form and depend on isSub,isSubmitSuccessful predicate in useEffect(). But if I have extra errors which saved in useState() they are out of sync with each other. It will be better if extra errors is going to validate by RHF.

Some piece of code (handler onSubmit and effect) to understand you better my case:

    const onSubmit = async (submittingData) => {
        const { text, shouldMessagePin, shouldMessageDelete, deletingTime, plannedSendingTime } = submittingData;

        if (isMaxFilesCountExceeded) {
            showMaxFilesCountError();
            return;
        }

        if (isFilesTotalSizeExceeded) {
            showMaxFilesTotalSizeError();
            return;
        }

        const formData = new FormData();
        formData.append('chat', chatInfo.id);
        formData.append('text', text);

        try {
            await httpClient(config[method](formData));

            notification.success({
                message: successfulText,
                description: '',
            });
        } catch (e) {
            notification.error({
                message: e.name,
                description: e.message,
            });

            console.error(e);
        }
    };

    useEffect(() => {
        if (isSubmitSuccessful && matchMessageCreateRoutePath) {
            resetForm();
        }

        if (isSubmitSuccessful && matchScheduledMessageEditRoutePath) {
            navigate('../scheduled');
        }

        return () => {
            resetForm();
        };
    }, [isSubmitSuccessful, matchMessageCreateRoutePath, matchScheduledMessageEditRoutePath, resetForm, navigate]);

[evgeniyworkbel]

HELP

[leapful]

@evgeniyworkbel

Please provide a minimal re-producible codesandbox. Plus, attach or upload file should be handled via <input type"file"> so it can be validated via react-hook-form.

[evgeniyworkbel]

I wanna know how to work with extra errors in general case