How to render dynamic error message generated while working with useFieldArray

[Sbabureddy]

Hello everyone,

I'm trying to render error message for each indivual field for different validations(required, maxLength, minLength).
I'm unable to render any error message to the dom(but it's logging to the console). Kindly help me to achieve this.
https://codesandbox.io/s/react-hook-form-usefieldarray-forked-xvx3qq

[bluebill1049]

You can supply an message as such: { required: 'This is required' }

[Sbabureddy]

Hi Bill,

Thanks for the quick reply. My question is different, now I've updated my code, still the error message didn't rendered on the UI.

for now just focus on line no: 51 on the code.
{errors?.test?.[index]?.firstName.message}
the above line is not updating the error message on UI but logging the error message to console.

to render the error messge I'm doing it {errors?.test?.[index]?.firstName.type === 'requierd' && <p>Input Required</p>}
I've mulitple form validations, so the above line didn't satisfying me.

Kindly help me to fix the above issue. And also if possible update the example on the react-hook-form website.

[bluebill1049]

it's there, missing is due to CSS style color.