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

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

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

Big fan of yours

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.

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

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

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?

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

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

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!

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

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.

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

good video

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.

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.

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

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.

Can you make more video on clean code and SOLID principle

Any coupon code for your course please 😮

Please add server action and error handling with this combo.

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 .

Please make a video on jwt authentication with Redux persist

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

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

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.

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

First comment 😜