Reusable Create & Edit Form in React (React Hook Form, Zod)

🚀 Project React → cosden.solutions/project-react
Source Code → github.com/cosdensolutions/co...
Join The Discord! → discord.cosden.solutions
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video I will show you how to create a reusable create & edit form in React using React Hook Form and Zod. We're going to be going into a form that is already created and we're going to add edit functionality to it in a way that's efficient and follows all of the React best practices and design patterns.

[@naziruadam3950]

Thanks for this piece. I think I'll have to follow this tut typing the code myself, that way, I'll understand it better.

[@kevinmitchell6141]

Would be great to see some dynamic form content! It adds a lot of complexity I feel

[@jitesh_khurana]

can be done by useFieldArray from react-hook-form

[@kevinmitchell6141]

@@jitesh_khurana yes but my point is that it can be difficult to work with + not much examples of it in the wild

[@thngzys]

I would advice against this. Have been using rhf in prod for couple of years. I will say it does not scale well with huge or dynamic forms. Better to have individual form instances for each section, then collate the data prior to submission.

[@thngzys]

Also, maintenance is a pain.

[@KartheekJavvajiKJ]

@@thngzys I have reached to a similar conclusion

[@navedkhan6643]

Big fan of yours

[@stefin1]

Would you leave the file as is, or decompose it into smaller files?

[@JohnSmith-gu9gl]

Great video but there is a problem. lets say you have a user form. if you want to update a user, password field is optional, so your types and validations have to know that. Maybe something like this: resolver: user ? zodResolver(updateUserValidator) : zodResolver(createUserValidator) , Would be great to see how you would solve that.

[@AviCharlop]

Nice idea and video thanks. Just one note, you are already using zod, parsing the user prop with zod would have made the spread for default values unnecessary and the logic a bit cleaner

[@rezaz7167]

Passing the parsed value as defaultValues?

[@AviCharlop]

@@rezaz7167 exactly. Something like: defaultValues: user ? formSchema.parse(user) : undefined

[@ptolemyhenson6838]

How can you create a form to allow users to create a list of arbitrary length (preferably a heterogeneous list, allowing the user to add multiple input types) using this method?

[@johndevnoza4223]

i would love to see, react query with react hook form and zod. since imnt pro with this, react query has different approach with FORM when it comes to mutations, so i couldnt understand it by myself. anyway Great videos!

[@serbanmarin-eusebiu]

The idea behind this video was very good and clear, but it would be more interesting if you would make a modal like with react-query under the hood. I’ve tried to create a such implementation, but it keeps falling for more than 2 use effects (linked data, one data depends on another). If you would like to create a video about this, I could give you access to the repository.

[@lord_kh4n]

Wouldn't simply providing a key should be possible?

[@serbanmarin-eusebiu]

The base ideea is that you can provide a modal state, and a key for what you need, and when you open the modal, you pass to the react query the modal state and the key to enable the fetch request.

[@violabg]

Why didn’t use Controller from react-hook-form, for DatePicker and Select

[@cosdensolutions]

You could

[@rezaz7167]

How?

[@alitonoliveira1700]

How to deal with nested array? That would be awesome.

[@jazzdestructor]

Hey Cosden i have just one query with register onSubmit it scrolls to it and redirects to the specific field, how can i achieve validation, required, error and scrollTo for components that dont register?? i have seen something called that react hook form but i am not quite sure on it. please let me know what can be done here.

[@varshithgowdav9892]

Can u please make a video on persisting user data,I'm really confused what to use .There are multiple options like local storage,redux ..etc.

[@rezaz7167]

When I pass undefined to default values (in rhf) the browser on client component gives me this warning: Changed from uncontrolled to controlled input. But when i explicitly gives {title: “”, email:””} its ok. Can someone explain a better way to tackle this issue

[@warrenpeace2557]

Any coupon code for your course please 😮

[@navedkhan6643]

Can you make more video on clean code and SOLID principle

[@imkir4n]

Please add server action and error handling with this combo.

[@petarmalamov2917]

Isn't is better to pass an onSubmit function to the component, the form component doesn't need to know what happens to the submitted data it just interested if the data is valid and you can pass only the form data, not the entire user. That way in the future if there is a 3th action the form needs to do ( can't think of one now :D ) you can just change the on submit function that you pass to the component .

[@akshayc3314]

Your contents are great. Can you please cover some other tech stack apart from react. Like devops or backend .

[@dipanjanghosal1662]

Please make a video on jwt authentication with Redux persist

[@NikhilPatel-bq7ck]

Have you ever made a video upon limitations of react-hook-forms and Formik? Is there any limitations when some more complex form with array type with multiple fields with some of theme as optional and some with lazy api call lets say some checks on db side and displaying validation like email exists. Such Comparison is bit rare in youtube. Everyone just shows very basic demos. Real usecase form are more complex and thats when only few quality content can help some to take decision which lib one should go with. If application is more complex lets say insurance company portal etc.

[@mohamedsalimbensalem6118]

because the majority of people watching youtube tutos are beginners

[@AhmedOsama5]

really nice video, but I think you don't have to pass the default value for every input manually I think just can use the form default value better

[@thngzys]

The reason why he had to pass manually is because he didn't use the Controller

[@jazzdestructor]

i think he could use getValues / watch instead of user Obj for consistency

[@AhmedOsama5]

using user data should be done once as default values that's the correct flow based on my experience any way the tutorial is more focused on another aspect and he did well about it @@jazzdestructor

[@AhmedOsama5]

yeb could be@@thngzys

[@shakapaker]

I would like to see how make add edit form with images

[@jitx2797]

I am currently using bunnycdn to handle them

[@VkParish]

First comment 😜