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
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.
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 .
No. Its a user form. Its onsubmit is defined in it. This isnt some generic form component. Its a userform only. If in the future u add more fields then where do you add them? In the user form itself... where do you update the onSubmit? Also the user form...
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?
Hi, thank you for your useful video. I have a question about next.js: we know we can't upload files in public folder in production environment, so, instead I'm uploading in other folder( at the same level as public) the pdfs files required, now, how can I show these pdf files inside an tag specifying the src attribute in production environment?
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.
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.
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.
Same schema, add discriminator prop like form type, make password optional and if its update user form then check for password on refine. Or make it a diecriminated union figure it out
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 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!
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.
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
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.
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
Passing the parsed value as defaultValues?
@@rezaz7167 exactly. Something like:
defaultValues: user ? formSchema.parse(user) : undefined
Would be great to see some dynamic form content! It adds a lot of complexity I feel
can be done by useFieldArray from react-hook-form
@@jitesh_khurana yes but my point is that it can be difficult to work with + not much examples of it in the wild
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.
Also, maintenance is a pain.
@@thngzys I have reached to a similar conclusion
Thanks for this piece. I think I'll have to follow this tut typing the code myself, that way, I'll understand it better.
Why didn’t use Controller from react-hook-form, for DatePicker and Select
You could
How?
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.
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 .
No. Its a user form. Its onsubmit is defined in it. This isnt some generic form component. Its a userform only. If in the future u add more fields then where do you add them? In the user form itself... where do you update the onSubmit? Also the user form...
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?
Hi, thank you for your useful video. I have a question about next.js: we know we can't upload files in public folder in production environment, so, instead I'm uploading in other folder( at the same level as public) the pdfs files required, now, how can I show these pdf files inside an tag specifying the src attribute in production environment?
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.
Wouldn't simply providing a key should be possible?
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.
Would you leave the file as is, or decompose it into smaller files?
Great video! Question, for a delete form you'd have to create a different form right?
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.
Same schema, add discriminator prop like form type, make password optional and if its update user form then check for password on refine. Or make it a diecriminated union figure it out
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 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!
How to deal with nested array? That would be awesome.
Can I apply same to react native?
Thank you. I will try to refactor my code. 😅.
I use to have create and editform
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.
Any coupon code for your course please 😮
Excellent demonstration of how to build an Edit/Add Form with React-Hook-Form and Zod. Thanks, Darius.
{2024-07-09}, {2024-00-01}
Why is it so hard to pre-populate data in react. Why!
Can you make more video on clean code and SOLID principle
Please add server action and error handling with this combo.
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
The reason why he had to pass manually is because he didn't use the Controller
i think he could use getValues / watch instead of user Obj for consistency
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
yeb could be@@thngzys
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.
because the majority of people watching youtube tutos are beginners
Please make a video on jwt authentication with Redux persist
Big fan of yours
I would like to see how make add edit form with images
I am currently using bunnycdn to handle them
17 minutes for a video on how to receive default values from props. Damn. People be milkin' hard.
Yup ...I am pretty sure these people are jobless and shameless scamming noobs
Your contents are great. Can you please cover some other tech stack apart from react. Like devops or backend .
First comment 😜