react-hook-form 中错误 object 的动态扩展

Question

React-hook-form provides an errors object through useForm. Since checking for error is dependent on the name attribute of the input field (something like {errors.title?.type === "require" && <p>Title required</p>} ) and I create the input field names dynamically, I need to somehow set the extension dynamically too.
{errors.title?.type === "require" && <p>Title required</p>} is created together with the form fields. Each new form field has one to validate it.

Because errors.title could be errors.title_3 , so:

{errors.

title <--This part would need to be dynamic, maybe dependant on props or state etc.

?.type === "require" && <p>Title required</p>}

I tried really hard to solve this propblem. I tried different variations of using eval() to get a string to function as logic. It created the logic dynamically but it didn't rerender when a form field error occured to display the error. So <p>Title required</p> was created. Don't know why.
I also tried to make it work trough useState and useEffect but I couldn't. I searched the web for solutions but didn't find any.

The solutions might be through react-hook-form, React or the solution might just be based in javascript. I really don't know. I'm just confused after hours of trying.

Thank you in advance.

Answer 1

I came across this same issue and i was able to resolve it using the Error Message component . Below is a code snippet.

import { ErrorMessage } from "@hookform/error-message";

 <ErrorMessage
   errors={errors}
  name={dynamicNameGoesHere}
 />

I hope this helps someone.