My friend, I am a senior IT kind of person. Spent more than three decades in IT. The reason I am saying this, to establish the importance of what I am going to say. First - Wonderful and precise content - Thinking abstract out of the box are very few. After a long time I found one - it is you. I really enjoyed this journey of watching your video. But I was not happy to see the subscribers you got? Probably there is a mistake on your side as well. Then content in this video are really good but can be appreciated only by experienced people quickly. This means, you have to make contents for newbies running basics Piece by piece. We all know Koushik of Javabrains. Trust me, I enjoyed your video as if I am watching him on the show. Try to prepare some basic contents but don't miss to release dense contents like this - otherwise we may fly away :). You have good time ahead. make it natural and keep going.
I really appreciate him. As you said it's for experienced people level of explanation. To get more subscribers and view, You have to explain little more detail but not too lengthy like UDEMY however i really loved it.
For select and multiselect, you can have two additional fields, options and selectedOptions.. options would be an array, you can loop through them and render options, selectedOptions would be an array of strings or a string based on multiselect or select
Nice video, congratulations for the great content. I have a question I hope you can help me, I have a invoice form that need a detailed list but I build this detail from another component external to this form how can o validate that details have data and send the array of data with the submit form? Thanks 🤓
You can make these checks at onSubmit function of your form.. alternatively.. you can send array of validations as a prop to your component, whenever onSubmit is fired, you can perform these validations
Maybe you would create a and pass all props to them. Another thing u didn't think about is textarea, select, and the data within radio and checked buttons, useState has a strange behavior when you check and uncheck them. What about all other html inputs attr? Data Picker, file, button? I think creating a switch case for each one is kind bad, idk. Just my opinion, maybe adding custom hooks for validation would be easier.
The example I showed above relies on react-hook-form which is used to create uncontrolled components. So, there is no need to rely on hooks or react state. You need to create similar case statements for all the other elements and for props you can create "props" filed in JSON and can spread it on element , but, this is just a one time activity. This approach is really useful when you have to dynamically control everything using only JSON. This JSON can be dynamically generated from the server and you can manipulate the form fields. If you don't have such use-case then this definitely is an overkill.
In a Django Rest Framework API when you use OPTIONS method you'll get a response like: { "name": "Table", "description": "", "renders": [ "application/json", "text/html" ], "parses": [ "application/json", "application/x-www-form-urlencoded", "multipart/form-data" ], "actions": { "POST": { "id": { "type": "integer", "required": false, "read_only": true, "label": "ID" }, "name": { "type": "string", "required": true, "read_only": false, "label": "Name", "max_length": 50 }, } } } } Would I be able to do something similar to get the fields of objects in "actions. POST" in this more dynamic way? Since it's not an array I think i can't do table.map() for example
The keys of object POST seems off, but still, you can use Object.keys to loop through keys and access elements using actons.POST[key] or you can just loop thourgh values using Object.values
I think there had been some changes for ref since the video and now validationProps don't work, having problems rendering errors, anybody has a solution?
Looks like v7 of react-hook-form migrated from using refs.. you can just spread properties on register. You can see this here - react-hook-form.com/migrate-v6-to-v7/
Here's the link for the source code - github.com/ChaitanyaKaranam/react-powerhouse
How can we pass function to dynamic form
@@funmora9140 you solved or find an answer somewhere?
react hook form update: From: To:
Version 6.X.X:
Version 7.0.X:
A very informative tutorial on creating re-usable React Forms using React-Hook-Form Library. Thanks very much.
{2022-03-11}
My friend, I am a senior IT kind of person. Spent more than three decades in IT. The reason I am saying this, to establish the importance of what I am going to say. First - Wonderful and precise content - Thinking abstract out of the box are very few. After a long time I found one - it is you. I really enjoyed this journey of watching your video. But I was not happy to see the subscribers you got? Probably there is a mistake on your side as well. Then content in this video are really good but can be appreciated only by experienced people quickly. This means, you have to make contents for newbies running basics Piece by piece. We all know Koushik of Javabrains. Trust me, I enjoyed your video as if I am watching him on the show. Try to prepare some basic contents but don't miss to release dense contents like this - otherwise we may fly away :). You have good time ahead. make it natural and keep going.
I really appreciate him. As you said it's for experienced people level of explanation. To get more subscribers and view, You have to explain little more detail but not too lengthy like UDEMY however i really loved it.
Hi! This was a wonderful video, however is it possible if you also show us how to integrate the select tag in it? Thanks in advance!
Great video. How can I use multiselect and select component with backend api to call?
For select and multiselect, you can have two additional fields, options and selectedOptions.. options would be an array, you can loop through them and render options, selectedOptions would be an array of strings or a string based on multiselect or select
Not usable with react hook form 7.
fantastic , please upload more videos
Planning to upload more videos soon
Nice video, congratulations for the great content. I have a question I hope you can help me, I have a invoice form that need a detailed list but I build this detail from another component external to this form how can o validate that details have data and send the array of data with the submit form? Thanks 🤓
You can make these checks at onSubmit function of your form.. alternatively.. you can send array of validations as a prop to your component, whenever onSubmit is fired, you can perform these validations
Great 👍
This was really great and helpful, thanks so much!
Thanx
Maybe you would create a and pass all props to them.
Another thing u didn't think about is textarea, select, and the data within radio and checked buttons, useState has a strange behavior when you check and uncheck them.
What about all other html inputs attr? Data Picker, file, button? I think creating a switch case for each one is kind bad, idk. Just my opinion, maybe adding custom hooks for validation would be easier.
The example I showed above relies on react-hook-form which is used to create uncontrolled components. So, there is no need to rely on hooks or react state. You need to create similar case statements for all the other elements and for props you can create "props" filed in JSON and can spread it on element , but, this is just a one time activity. This approach is really useful when you have to dynamically control everything using only JSON. This JSON can be dynamically generated from the server and you can manipulate the form fields. If you don't have such use-case then this definitely is an overkill.
Thanks for the video. I love it.
Thank you.
Thanks for this video!
How can I do this for a password confirmation when both have the case 'password'?
Cool. Could you show CRUD operations in the form and save it in a table grid within a page and backed as google firestore. Thanks
Good stuff
In a Django Rest Framework API when you use OPTIONS method you'll get a response like:
{
"name": "Table",
"description": "",
"renders": [
"application/json",
"text/html"
],
"parses": [
"application/json",
"application/x-www-form-urlencoded",
"multipart/form-data"
],
"actions": {
"POST": {
"id": {
"type": "integer",
"required": false,
"read_only": true,
"label": "ID"
},
"name": {
"type": "string",
"required": true,
"read_only": false,
"label": "Name",
"max_length": 50
},
}
}
}
}
Would I be able to do something similar to get the fields of objects in "actions. POST" in this more dynamic way? Since it's not an array I think i can't do table.map() for example
The keys of object POST seems off, but still, you can use Object.keys to loop through keys and access elements using actons.POST[key] or you can just loop thourgh values using Object.values
Thank you for sharing
very informative
wonderful ❤
I think there had been some changes for ref since the video and now validationProps don't work, having problems rendering errors, anybody has a solution?
Looks like v7 of react-hook-form migrated from using refs.. you can just spread properties on register.
You can see this here - react-hook-form.com/migrate-v6-to-v7/
@@kchaiprogramming6179 can you please provide the updated code for validationProps, I tried all the way but not able to get the right output.