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
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 helpsPages/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:””}]
im looking at the code and i dont see where any of that gets set