Does not work with React Hook Form v7 FormProvider

[manzoorwanijk]

ErrorMessage uses V6 API, so we need to pass the errors prop to make it work in V7

error-message/src/ErrorMessage.tsx

Lines 20 to 25 in 7ac249b

	const methods = useFormContext();
	const error = get(errors || methods.errors, name);
	if (!error) {
	return null;
	}

[jorisre]

Good catch !

@bluebill1049 What do you prefer ?

• A new V1 for React Hook Form v7 (like resolvers)
• Just:

  const isV7 = 'errors' in methods.formState;
  const error = get(errors || isV7 ? methods.formState.errors : methods.errors, name); 

[bluebill1049]

oops~ would you like to upgrade this package @jorisre? if you are busy, i will sort it out too.

[jorisre]

I can do it this afternoon if you're busy. Which solution do you like ?

[bluebill1049]

I think the new version makes sense.

[jorisre]

@manzoorwanijk V2 is released and support React Hook Form V7 🎉

[manzoorwanijk]

Thank you.

[steveoh]

Did the syntax change with v2? The readme doesn't show anything but I'm receiving

<ErrorMessage errors={errors} name="firstName" as={ErrorMessageTag} />

ErrorMessage.tsx:21 Uncaught (in promise) TypeError: Cannot read property 'formState' of null
    at s (ErrorMessage.tsx:21)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)

The v7 migration guide is helpful there...

- const { errors } = useForm();
+ const { formState: { errors } } = useForm();

I wonder if this could be improved

[jorisre]

Hi @steveoh
The syntax didn't change with v2. V2 just support React Hook Form v7, can you provide a codesandbox with your problem please ?

[steveoh]

My issue is that in V7 the errors object has been moved into formState object.