Dynamically add errors when using useFieldArray with React Hook Form

Question

How would you go about dynamically adding custom error messages to inputs that are generated with useFieldArray?

Very simple codesandbox here - https://codesandbox.io/s/romantic-dubinsky-xd6f7?file=/src/App.js

Usually I would write something like {errors.name && <p>This can't be empty</p>} however with useFieldArray the names of the inputs are dynamically generated. I've tried something like {errors.items.index.name && <p>This can't be empty</p>} but that doesn't work.

Any suggestions?

This bracket syntax is so confusing because it’s not mentioned on their website and it doesn’t match the field name i had the same problem with seterror — gavin
– gavin, Commented Jan 7, 2022 at 11:28

knoefel · Accepted Answer · 2021-04-21 17:18:02Z

20

You were very close, but you need to use the bracket syntax (and also optional chaining to check if the path is available/valid):

{errors.items?.[index]?.name && <p>This can't be empty</p>}

edited Apr 21, 2021 at 17:18

answered Apr 21, 2021 at 17:07

knoefel

7,0383 gold badges39 silver badges53 bronze badges

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

Comments

Kelly Milligan · Accepted Answer · 2022-08-12 01:11:26Z

1

is there a way to show only on blur? it looks like both the field is touched right away when you use append, and the error is there right away, vs the field that is already there the error shows onBlur by default.

answered Aug 12, 2022 at 1:11

Kelly Milligan

5881 gold badge4 silver badges18 bronze badges

Collectives™ on Stack Overflow

Dynamically add errors when using useFieldArray with React Hook Form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related