react-hook-form: Error after migrating to v4: Property 'message' does not exist on type 'FieldErrors[]'

Describe the bug I upgraded to v4 the code below throws this error:

Property ‘message’ does not exist on type ‘FieldError | FieldErrors<any> | FieldErrors<any>[]’. Property ‘message’ does not exist on type ‘FieldErrors<any>[]’

<Controller
  as={
	<TextField
	  fullWidth
	  required
	  variant="outlined"
	  margin="dense"
	  className={clsx(classes.textField)}
	  label="Nombre y Apellido"
	  error={!!errors.nombre}
	  helperText={errors.nombre && errors.nombre.message}
	/>
  }
  name="nombre"
  control={control}
/>

Screenshots

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (10 by maintainers)

Commits related to this issue

fix #728 Date type support — committed to react-hook-form/react-hook-form by bluebill1049 5 years ago

Most upvoted comments

I had to cast errors[fieldname] as any

(errors[fieldname] as any)?.message

+10

longilineo on Dec 28, 2019

Faced this issue today where I wanted to create a input for a smart form component, using a formdata interface as a generic would work but since the formdata is unknown for a smart form input, passing in

const { errors } = useFormContext<Record<string, unknown>>();

<FormErrorMessage>{errors[name]?.message}</FormErrorMessage>

works fine

daniellwdb on Jan 6, 2020

(errors.email as any)?.message it’s work for me email is you fildName

dimitir on Mar 12, 2020

https://codesandbox.io/s/react-hook-form-typescript-error-idrxj

bluebill1049 on Dec 30, 2019

@pandaniell i think we have a ErrorMessage component now

bluebill1049 on Jan 6, 2020

I think this is possible I tried to follow the interfaces definition but not completly understanded them. Tomorrow will try again, if you have some documentation could be easier.

cargallo on Dec 27, 2019

I experienced something similar. The solution I found was the following:

const {errors} = useFormContext();
const error = get(errors, "name");
if(error && ('type' in error)) {
    // do something
}

The get(...) comes from lodash.

chriscarrillo on Dec 27, 2019