Handling errors in react-hook-form

Question

According to documentation of react-hook-form I can use name of input element like this "xxx.yyy" and this will result in my prepared data to be

{ xxx: { yyy: value }}

But when I try to use this feature with 'errors' I cannot use it. i.e. I cannot write below:

{errors.xxx.yyy && <span>This field is required</span>}

because I get "Cannot read property 'yyy' of undefined".

Documentation says that I should use this chaining operator, ?. , so I try it:

{errors?.xxx?.yyy && <span>This field is required</span>}

But nothing displays on the page if required input is omitted. I can see that the mechanism blocks form from being submitted until I write something in this field, that is OK, but why I don't get the error message on the page?

Bill · Accepted Answer · 2019-12-31 05:04:30Z

3

it really depend which version you are using.

V3: flat error object

errors['xxx.yyyy']

V4: Nested errors object with better type support

errors?.xxx?.yyyy

we have also build a ErrorMessage component which you may find it useful.

https://react-hook-form.com/api#ErrorMessage

answered Dec 31, 2019 at 5:04

Bill

19.5k21 gold badges89 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

YotKay · Accepted Answer · 2019-12-23 13:00:28Z

1

Ok, I found answer myself. I should use this form:

{errors['xxx.yyy'] && This field is required}

Then everything works :-)

answered Dec 23, 2019 at 13:00

YotKay

1,2373 gold badges14 silver badges30 bronze badges

Comments

Mafei · Accepted Answer · 2020-12-31 11:47:36Z

you don't want to spend your coding time. you can use @hookform/error-message instead of code manually. it's very easy. it'll manage those errors. just pass the errors object given by react-hook-form and pass the property name that you want to display the error message.

<ErrorMessage errors={errors} name="xxx.yyy" message="This is required" />

OR

if you want to customize your message as you want, you can render as you want like below. think that you want to bold and show invalid with red custom css class. then you can render as you want.

<ErrorMessage render={({message}) => <div className="invalid-feedback d-block"><b> {message} </b></div>} errors={errors} name="xxx.yyy"/>

NPM https://www.npmjs.com/package/@hookform/error-message

Collectives™ on Stack Overflow

Handling errors in react-hook-form

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related