CODEWITHSUNDEEP
reactjsreact-hook-form
user8006446
user8006446

Reputation: 475

Dynamically add errors when using useFieldArray with React Hook Form

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?

Upvotes: 9

Views: 17588

Answers (2)

Kelly Milligan
Kelly Milligan

Reputation: 588

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.

Upvotes: 1

knoefel
knoefel

Reputation: 6949

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>}

Edit React Hook Form - FieldsArray - Display Error

Upvotes: 20

Related Questions