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?

Answer 1

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