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

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.

[kevinmitchell]

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

[naziruadam]

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

[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

[violabg]

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

[petarmalamov]

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 .

[mDHARYL]

Thank you. I will try to refactor my code. 😅.
I use to have create and editform

[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.

[johndevnoza]

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!

[stefin]

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

[hqasmei]

Great video! Question, for a delete form you'd have to create a different form right?

[warrenpeace]

Any coupon code for your course please 😮

[devGamersCoders]

I would like some changes to do if I was using this approach cause I would pass initialvalue from parent like add and edit page cause it is more relative than using if else same for handleSubmir fnc.

[navedkhan]

Can you make more video on clean code and SOLID principle

[Pareshbpatel]

Excellent demonstration of how to build an Edit/Add Form with React-Hook-Form and Zod. Thanks, Darius.

{2024-07-09}, {2024-00-01}

[dipanjanghosal]

Please make a video on jwt authentication with Redux persist

[AhmedOsama]

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

[shakapaker]

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

[ZhulienDI]

17 minutes for a video on how to receive default values from props. Damn. People be milkin' hard.

[varshithgowdav]

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.

[JohnSmith-gugl]

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 ? :,

Would be great to see how you would solve that.