Good one :) To clear values after form submission, make the state as null below after handling submission but inside the same function setDetails({ name:" " email:" " password:" " address:" ") also add a value attribute to input type and pass the properties of the object value = {details.name} and so and so
@@dabbarnaresh7791 I have 10 and I made a separate use-input,with this code and moved the component in to the Form component and when I want to validate the form, it takes the info even if the form is incomplete. I have 10 inputs and if I complete one of the inputs and submit, it takes the form. I don't want that , plus the error messages for validation disappear after the first completed input and no message appears for the following inputs, regardless of whether I send the empty input.You have the same problem?
To the point and clear explanation of each variable being used specially the event handler part. This is what is required to understand the basic concepts. Thank you 👍
Glad to hear that. If you want to learn React JS from scratch then you can also take my Complete React JS Course 2024❤❤❤ Link - www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD
Thank you so much❤❤ If you like this tutorial then you can try my recently launched React JS course. Link - www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD
U really help me, cause i really stuck on props drilling. I have a complex form structure and i can't figure out how can i do this with one handleClick. Buy i have a question, why we must wrapping 'name' const in "[ ]"?
The reason we have to wrap name variable with [ ] is because our "name" is not a string, it is variable. And If in our object we write {...prev, name: value} then our we name is set to object property. Not a dynamic property. If we wrap our name with [ ] then we can set email field to email value, phone number to phone number value like this. If you are still confused, then try to remove square brackets and see the object in console. You will understand that.Thanks for watching❤❤❤
Very great tutorial. How do you set validation form with that ? Would also love to see a login/log out/forgot password (recovery/reset). Thanks. I'm subscribing to see every of tutorials.
You have to use nested destructuring. The goal of all change function is, you have to restore all values from your current and object and just change the field which you want to update
I made a separate use-input component and i use it in the Form component and when I want to validate the form, it takes the info even if the form is incomplete. I have 10 inputs and if I complete one of the inputs and submit it, it takes the form. I don't want that , plus the error messages for validation disappear after the first completed input and no message appears for the following inputs, regardless of whether I send the empty input
got quite confused at the name part, but I realized the name in input is an attribute and it can be anything....the name in const details is just the object that is used for manipulation.
a better and faster way to make the handleChange function is const handleChange = (event) => { setUsersAnswers(prev => ({...prev, [event.target.name]: event.target.value })) }
If you want to add data locally in your application then you have to lift your state up and then pass userDetails and setUsersDetails in form component by using props. In real world, for login and signup, we use JWT(JSON WEB TOKEN) Watch this for JWT: th-cam.com/video/0kG0ZhPCqlE/w-d-xo.html
the question is, if it's comming a data like this but the data is an array of this object and you wnat to do that for each object, how you can handle this?
Hi! Great explanation. How would you do this with an object that has nested data? I.e. { name: "", address: { street: "", neighbourhood: "", city: ""}}
For that you have to create two handleChange functions. 1 for handling name, age etc and one for handling nest address fields like this: const handleAddressChange = (event) => { const { name, value } = event.target; setFormData((prevFormData) => ({ ...prevFormData, address: { ...prevFormData.address, [name]: value } })); };
@@dabbarnaresh7791 create empty object of state and create one array of input fields name. Then using map method render input field with name and onChange and then write this 2 lines in handleChange function. I think that will work😀😀
Because we are getting value from event object and it's is not necessary that value is fixed. But for name, we have to fix same as we add in our data object. Because by using that field name attribute, we will add data value in that property. For example, if our object has property called "address", then in the input box, we give our input field name attribute to same as our property name "address". Otherwise when we do changes in that input box, how can we set value to address property. That's why I put more focus on name attribute.
const handleChange = (e) => { const name = e.target.name; const value = e.target.value; setPackagePrice((prev) => { return {...prev, [name]: value} }) } its showing error that setPackagePrice in not defined. is followed your code just names are changed
After Console values in submit function, setUserDetails(DEFAULT_OBJECT). DEFAULT_OBJECT is that which you pass in useState initial value. SIMPLE :) If you want to Validate Form, Then I have another Tutorial - LINK : th-cam.com/video/-rLM9t5UMOk/w-d-xo.html
![React Hooks in ONE Video 2022 [ EASIEST Explanation ] | React JS Tutorial](http://i.ytimg.com/vi/HnXPKtro4SM/mqdefault.jpg)
This is what i searched for.
Clean & simple
Keep it up bro.
Thanks for Feedback😀
hey this is one of the best and clean explaination. Subbed. No fluff straight to the point and clear. Thanks so much :)
Thank you so much for your support. Really grateful for that😇❤
but the input values are not removing its stii there
This is what I needed, God bless You bro.
❤❤❤
Thx to you. Short and simple. no fuzz.
❤❤❤
Excellent, you have a great future in teaching. Please continue teaching and making more such videos. Appreciated.
Thank you so much for this comment.. I will never stop teaching😇❤
Good one :)
To clear values after form submission,
make the state as null below after handling submission but inside the same function
setDetails({
name:" "
email:" "
password:" "
address:" ")
also add a value attribute to input type and pass the properties of the object
value = {details.name}
and so and so
thank you! was wondering that
Any other way, I have lot of input fields, above 50
@@dabbarnaresh7791 I have 10 and I made a separate use-input,with this code and moved the component in to the Form component and when I want to validate the form, it takes the info even if the form is incomplete. I have 10 inputs and if I complete one of the inputs and submit, it takes the form. I don't want that , plus the error messages for validation disappear after the first completed input and no message appears for the following inputs, regardless of whether I send the empty input.You have the same problem?
By seeing this vedio i blindly gone to udemy and purchaased ur vedio Reactjs hope you don't disapoint me
I try my best to create this course. I hope you don't get disappoint.
Amazing! Love videos like this, well edited, great pronunciation, clear, short and concise. Just what I needed. Keep at it! THANKS!
Thank you so much for your support and feedback. Grateful for that😇❤
Gajab bhai, Explained with high simplicity!!
Thanks for your support❤❤
Wow , Now I could understand the react concept. It is really very helpful for me. Thank you very much bro.
Thank you for your support ❤️😇
Good job, sir. Thank you!
❤❤❤
Amazing! I searched for this solution for so long!
Thanks for your support❤❤
I was struggling with implementing useState. This video perfectly explained everything I didn't understand. 👍
❤❤❤
I was searching it and was lot confused now it's clear
❤❤
Thank you soooooo sooooo much for this video. i'm exactly looking for this functionality.
Welcome and thanks for your support😇❤❤
Thank you! You are a great teacher. You made this click for me when I was struggling.
Made my day❤❤❤
To the point and clear explanation of each variable being used specially the event handler part. This is what is required to understand the basic concepts. Thank you 👍
Glad to hear that. If you want to learn React JS from scratch then you can also take my Complete React JS Course 2024❤❤❤
Link - www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD
Bro till now I watched many videos regarding to react concepts but in this video I found feels like my best friend teaches to me😀
It is True. I am your friend😀❤
Great video! Ive been tinkering with this for way too long.
Great to hear!😇❤
Really so much helpful without any time wastage like other thank you so much bro ❤ I'm your new subscriber
Thank you so much❤❤ If you like this tutorial then you can try my recently launched React JS course. Link - www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD
Thanks man, very concise and clear, keep it up👏👏
Thank you for your support 😍😇
Thanks for clearing my doubt, bro👍
Thanks for your support brother❤❤❤
Thank You man, this helped a lot!
Thanks for your support❤❤
wow this was simple
with detailed explanation thank you
Thanks for Feedback😀
Thank you for the video! great vid.
Thank you so much for your support ❤❤
thank you very very much. And yes SUBSCRIBED!!!!
Thank you so much. Really grateful for that
Love you broo, really impressive ❤❤
Thanks for this support brother❤❤
great content !! u gained a sub
Glad to hear that ❤❤❤
Bro i wish u a good luck...im soo happy to see this video, i was scratching my head to understand how this works thanks a lot bro
Glad to hear that. Thank you so much❤❤❤
Most important video very much appreciated thanks for sharing your knowledge on react
Thanks for your comment😀
thank you soooooooooooo you helped me a lot...My GOD BLESS YOU SIR!
My Pleasure Brother😀
Very clear and simple bro
Thanks for this comment😀❤
thanks for making this video !
❤❤❤
Nice bruh!! Keep up the good work
Thanks a lot brother❤
Thank you very much man, you awesome 👌
❤❤❤
another awesome video thank you!
Thanks for your support😀
such a brilliant, thanks for sharing
😇❤❤
U really help me, cause i really stuck on props drilling. I have a complex form structure and i can't figure out how can i do this with one handleClick. Buy i have a question, why we must wrapping 'name' const in "[ ]"?
The reason we have to wrap name variable with [ ] is because our "name" is not a string, it is variable. And If in our object we write {...prev, name: value} then our we name is set to object property. Not a dynamic property. If we wrap our name with [ ] then we can set email field to email value, phone number to phone number value like this.
If you are still confused, then try to remove square brackets and see the object in console. You will understand that.Thanks for watching❤❤❤
thank you @@CodeBlessYou
Great tutorial, better than I expected. However, could you do some tutorials where it's about "Array of Objects" and not single arrays?
Sure I will do that
Nice, thanks. It helped a lot.
Thanks for Comment😇
does this valid for redio,checkbox, selectbox and etc
Yes
Clean code, Clear explanation 👍
Thanks for this comment😇
Genius bro, genius
Thanks for your support. Grateful for that❤❤
very nice bro..keep it up & upload more on react
Sure I will 😇
Awesome explanation in a sort span of time keep up the good work buddy
Thanks buddy😀
Well Done Brother! Keep it Up🙌🙌
Thanks for this comment❤
Very great tutorial.
How do you set validation form with that ?
Would also love to see a login/log out/forgot password (recovery/reset).
Thanks.
I'm subscribing to see every of tutorials.
Thank you so much for your support ❤️😇
I already uploaded form validation, JWT(for login, logout) on this channel.
You can check that😊👍
neat and clean code
❤❤❤
Nice one
❤❤❤
That's what I want thanks bro
😀😀
You are great bro
I am not Great brother. Grateful for your support❤❤
Awesome explanation 👌
Thank you for this comment😇
@@CodeBlessYou but how do u take value, and implement other components
@@sadiq.r9604 Can you explain with example? I don't get your question
Hi! Great! I have another object inside details object. then how can I store value to those fileds
You have to use nested destructuring. The goal of all change function is, you have to restore all values from your current and object and just change the field which you want to update
@@CodeBlessYou Thank you! I just separated array😌 and its working fine.
@@jahan3735 Nice❤❤
I made a separate use-input component and i use it in the Form component and when I want to validate the form, it takes the info even if the form is incomplete. I have 10 inputs and if I complete one of the inputs and submit it, it takes the form. I don't want that , plus the error messages for validation disappear after the first completed input and no message appears for the following inputs, regardless of whether I send the empty input
You can check my Form validation tutorial if you want for Form validation - th-cam.com/video/-rLM9t5UMOk/w-d-xo.html
got quite confused at the name part, but I realized the name in input is an attribute and it can be anything....the name in const details is just the object that is used for manipulation.
try it first hope you are right
In short, and the formdata object look like this: {first_name: " "}
Brilliant 🔥
❤❤
Nice work
😀❤❤
Which vs theme you use..??
AYU Dark
Great, but what if i want to print the entered details on next page which will pop up after hitting submit button, how do I do that
You have to lift your useState variables in your parent component and then pass userDetails and setUserDetails in the props for your two components
@@CodeBlessYou thank you
Anyone knows where i can find the "name" of the docs page for the [name]: value "trick", i've never seen this before
I think it's just pattern
a better and faster way to make the handleChange function is const handleChange = (event) => {
setUsersAnswers(prev => ({...prev, [event.target.name]: event.target.value }))
}
True, That's the same❤❤
How do you render the data on the browser with form submission?
If you want to add data locally in your application then you have to lift your state up and then pass userDetails and setUsersDetails in form component by using props.
In real world, for login and signup, we use JWT(JSON WEB TOKEN) Watch this for JWT: th-cam.com/video/0kG0ZhPCqlE/w-d-xo.html
@@CodeBlessYou Okay thank you! I'll watch some videos on lifting up state
Thank you so much! You rlly help me!
Welcome and Thanks for comment😀😀
""
Yes my mistake😅😅😅
Thank you
Thanks for your support❤😇
plz make a video like this on react
I created complete course on React JS. You can check that from the pin comment.
Is that optimized ? Because each time a value inside the state Object change, all the value will changed for react ?! ?
Yes you can use this method, when you have more than 2-3 inputs.
5:43 line number 14 😢😢😢
thanks bhai
❤❤❤
Everything else is great
But please next time share the code as well
I will❤❤
the question is, if it's comming a data like this but the data is an array of this object and you wnat to do that for each object, how you can handle this?
Identify each object with using unique id or index
What theme you use
Ayu Mirage Bordered
whats the diff btwn function handlechange(), and const handlechange() ?
both are same just a different function syntax. But using arrow function syntax is more effective
Hi! Great explanation. How would you do this with an object that has nested data? I.e. { name: "", address: { street: "", neighbourhood: "", city: ""}}
For that you have to create two handleChange functions. 1 for handling name, age etc and one for handling nest address fields like this:
const handleAddressChange = (event) => {
const { name, value } = event.target;
setFormData((prevFormData) => ({
...prevFormData,
address: {
...prevFormData.address,
[name]: value
}
}));
};
Thanks for asking great question. I also learn this trick because of you❤❤
thanks
❤
What will happen if i refresh. will the entered character stay?
No on refresh It will clear the inputs
How to print on webpage not console
Use JSX for that
how do i solve the input delay issue
Can you explain in details?
After submitting data, how to empty input area automatically?
Set your state object to default
How , setvalue({ }) or any other option, I have more than 50 input fields
@@dabbarnaresh7791 create empty object of state and create one array of input fields name. Then using map method render input field with name and onChange and then write this 2 lines in handleChange function. I think that will work😀😀
How to apply Switch function in this
You can apply Switch case for checking the form field name, but that will unnecessarily increase the lines of code❤❤
i have doubt if we'r passing as value then why did you only mension name pls replay
Because we are getting value from event object and it's is not necessary that value is fixed. But for name, we have to fix same as we add in our data object. Because by using that field name attribute, we will add data value in that property.
For example, if our object has property called "address", then in the input box, we give our input field name attribute to same as our property name "address". Otherwise when we do changes in that input box, how can we set value to address property. That's why I put more focus on name attribute.
🤩Access My Complete React Course:- www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD
🚀Access My REDUX Course:- www.udemy.com/course/the-ultimate-redux-course-state-management-library/?referralCode=0E6517D629498E1C48D7
const handleChange = (e) => {
const name = e.target.name;
const value = e.target.value;
setPackagePrice((prev) => {
return {...prev, [name]: value}
})
}
its showing error that setPackagePrice in not defined. is followed your code just names are changed
Then you have a problem in declaration of useState (CHECK names TWICE)
instead of console.log how to print all details in screen
Use map method if you have array
from form?
😅😅😅
good
nicee
😀
how to print the output in screen
You have to do map the details array.
Right👍
I thought he was going to provide the link to the code.
It is just 2 lines of code
theme name
AYU Mirage
add form reset code to it
After Console values in submit function, setUserDetails(DEFAULT_OBJECT).
DEFAULT_OBJECT is that which you pass in useState initial value. SIMPLE :)
If you want to Validate Form, Then I have another Tutorial - LINK : th-cam.com/video/-rLM9t5UMOk/w-d-xo.html
Real world forms are fucking complex
Like angela yu
form and submit spelling was wrong brother....in this video
Yes!! Sorry for that😅
from kyu likha hai bhai
It is mistake. Sorry about that
This was my interview coding round question...and I fked it up 🥲🥹
Don't worry buddy. It was not your last interview. Take it as a lesson and upgrade your skills❤❤❤
Thank you
❤❤