React-hook-form dynamic input

Repo: https://github.com/Parthvsquare/marquee-test Issue: The subtask input should be dynamic so i used useFieldArray, but i am getting some undefined values in there. Could someone help me to figure out what i did wrong (this was a test, but i obviously failed) just want to learn how to use dynamic input
GitHub
GitHub - Parthvsquare/marquee-test: todo project for marquee equity...
todo project for marquee equity. It's made with useContext, and useReducer. No use of global state manger like (redux, jotai, zustand, etc.) - GitHub - Parthvsquare/marquee-test: todo proje...
3 Replies
Tom
Tom2y ago
what files? i will give you a couple pieces of advcie rfom using RHF 1) its usually better to not destructure the form stuff. as your form gets more complicated it gets harder to pass the pieces around to subcomponents (and if youre making a TODO app i imagine most of your app is a form) 2) (youre not doing this) but do not use .optional() types in your zod validator. If you want to make a value optional use .nullable() instead. RHF does some weird stuff with undefined. If you look at the type of defaultValues youll see what i mean. In addition, most controlled inputs dont like you providing undefined as a value. React will complain about inputs moving from uncotnrolled to controlled 3) always provide defaultValues. it makes things a lot more predictable (in my experience) #3 is probably why you are getting undefined's hope that helps
albatroz
albatroz2y ago
Pages/Home/index.tsx @tcaputi There is a subtasks array obj inside tasks array obj The input name is ‘subtasks.{task.id}.subtaskName’ The array from useFieldsArray should not have undefined init It should be [{subname: “test 1”},{subname:””}]
Tom
Tom2y ago
im looking at the code and i dont see where any of that gets set
Want results from more Discord servers?
Add your server