I don't think I have ever paid for free videos, but to you, I sent "support" money happily. The best instructables on youtube I know. Great work!

Great video as always!!! I will add that you don't have to add different handler for each input, you can use the same handler for all of them like that: handleInput = (e) => { this.setState({ [e.target.name]: e.target.value, }); as long as you give each input the same name as the name you gave the key in the state. examle: this.state.userName then the input should look like this: type="text" name="userName" onChange={this.handleInput} value={userName} /> this way you can have one handler for all inputs

I swear this is the best Javascript/js frameworks teacher I had ever had

you know, after watching videos from brad traversy, colt steel and all other, you are the only tutor that cleared all the mess in my mind. Best tutor ever. 😊 God bless you for your work.

Watched like 7 tutorials on doing forms in react. This is the only one that made any sense. Subscribed, and thank you for the clear explanations. You’re a fantastic teacher, and I really appreciate this content.

'let me break it down and then we can look at the code'.... you gained a subscriber!.. great explanation step by step ! thankyou

watched 3 other tutorials by other youtubers, i feel like you have the best videos. thanks a lot. really appreciate these guides!

118 videos, but this is the most useful tutorial I had found, I'm expecting to watch it till the end. Thank you! (after 4 years, all the videos till this one still working just fine)

0:40 controlled component 6:35 controlled components for a text area and select tag 12:09 the data of form is lost after refresh => preventDefault()13:35 destructuring the state

I am from Brazil as a backend developer. And I have to say that I've tried to learn react many times but with no success. Your videos are giving me the best learning experience. I really appreciated your series.

Thank you for such a great tutorial series. There was not a single concept that I was not able to understand from your 'ReactJS Tutorial for Beginners' series. Keep making such great content.

just got to know your channel from a friend....i don't know why KZfaq never recommended me any of your videos. Best react tutorial by far...short, clear and on point.

At the end, when you said thank you, I said thank you. Thank you.

I have never seen any react tutorial that explains form handling as good as this one!

Mann m hai *VISHWAS* poora h *VISHWAS* hum honge kamyab ek din.

I watched other videos on this, but his one is just the best. Awesome! Much love! ❤️

I am seeing your videos for the past few days. It is great.

I saw lots of video for form Handling but no one able to understand at once I have to repeat each multi time then it understood a little.. But after watching ur video it's clearly understand at first time thx for ur effort 👏🤝 do more I will support ur effort 👍...

we are gifted this amazing youtuber by god .Thanks for putting out all such quality content for free.Its helping us alot cant even explain.

Hi, is there a way to have this video redone for functional components rather than class components?

You are my idol Vishwas. I want to learn from where you learn everything because everyone learns from somewhere. I want to be like you. The way you clear the concept with an example.

Thank you for your CLEAR explanations. Great teacher!!

This is by far the best tut ey. I've browsed the whole KZfaq LOL!!!

You really have the gift of teaching. Thanks for this video and this fantastic whole series.

This man here is a lifesaver. Thank you

You are an absolute legend! Great at explaining topics with good examples.

what a jam packed video full of rich information. great work sir!

Best form handling video I've seen! Thank you very much, sir.

Can't get enough of these.

1. event.target.value -> value 2. event handler method -> takes event as a parameter 3. this.setState 4. value={this.state.var} -> to be in sync 5. e.preventDefault() - as name suggests 6. select + option, label, input +text, textarea, submit - tags. value attribute

Functional handler for all form inputs. Values will be an object where the key is the "name" attribute of each input and the value is the value of the input upon submission. const [values, setValues] = useState(); const handleInputChange = (e) => { setValues((prevState) => ({ ...prevState, [e.target.name]: e.target.value })); }; ...

exactly what i was looking for...🔥🔥💪

Thanks so much, sir Vishwas. You are the best.

Love the way he explains things

I have learned a lot from your youtube video. Thank you very much!

thankyou for the tutorial. So for every form element we need to add event listener? Isnot there any other efficient way of getting form values once for all elements on form submit? Also how to update an array of objects with form data?

superb tutorial series ever

I have created a form in similar manner as shown but when i click on submit button it does not show any pop up with all values inserted. How can this get resolved?

Completed video 21. Thank you 🙂

Superb Video Big fan of your tutorial from nepal

Hi, you are a great tutor, you breaks everything into a simpler steps. Is there any video for form handling in functional components

Fantastic tutorial! Much gratitude.

Sir Nice video but one question what if we have more than 20-30 controls/fields then by this way we have to make 30 function and set their state 30 times, why dont we make only one function and get all the values of a fields , how we do this? how to get all the input field value when clicked submit button

Thank you so much for the very clear explanation!

Instead of just email, you could have a real world object say Person with some mandatory fields such as first name, last name, dob, email etc and club if with foam validation with error handling in say 2 or 3 parts...this would help most beginners to intermediate coders...just a suggestion. Otherwise, great tutorials as usual coming from you...I have over 30 years of IT experience in USA...lol...and always enjoy learning new technologies 😀

That's so much work for a fairly simple form!

From bottom to top great explanation :)

IT WAS FANTASTIC! Thank you very VERY much!

Really I'm Speechless Buddy..Thanks a lot

Hi, love your videos. I’m trying to create multiple pages. When I navigate from one page to another, I want the data that was filled by the user to be saved automatically. Note the user has not submitted anything yet, nor there is any save button. The user has simply jumped from one page with form components to another page with other form components using react routers... And I want whatever the user entered saved Can that be done? When the user goes back to the pervious page, the user can pick up where he left off? Of course all this eventually will go to the redux store. But I’m trying to solve the “saved” state of these form even after navigating to other components/pages using react routers

Sir , The text is able to take inputs without writing onChange handler..is it updated in the newer versions

Great Job! Really clearly understood tutorial.

a clear explanation. Thank you so much. Have a great future.

Hey Codevolution, why do we not bind the events inside forms in the constructor ?

Many Many Thanks sir for crystal clear explanation

I don't know if this is a dumb question (if it is I apologise in advance lol) but when you press Submit in 12:33, for the element, I noticed the alert brings the *value* of the element, and not the filling of the tag, which would be React with an upper-case R, is that expected? So when the user fills in the username and comment, would that be the values of the inputs username and comment?

Wow,man you are a good teacher

Hi Vishwas, great tutorial man. Your tutorial qualities are top notch as usual. I have a question though. When you're updating state using this.setstate({topic: event.target.value}), you are not passing the values of other two properties of the state object. I am assuming the state object is immutable. So when you're passing just one value, why aren't the other two values getting removed? Is React internally calling this.state = {...this.state, topic: event.target.value}. I'll be glad if you reply to this question

Really appreciated ur work...thank you so much....for clearing the concepts

I use Angular from version 1.2, React is so logic!

Absolutely wonderful

Hi Vishwas, Thank you for great tutorials that you provide for free. I was wondering why don't we bind those class methods as we did before?

Great job man! 👍

Thanks, well explained!

I have a question, the alert did not work for me and I am not sure of the reason, please help me out

It is a good video, which is quite detail. THanks

watched few other videos.But this was very clear and easy to follow. By the way, is there any way to use only one changehandler for all input fields?

completed video 21. Thank you 🙂

Why do we need to do all of the setState steps when we can just remove the " Value " property and type whatever we want that way

Angular or React, which do you personally prefer?

you are an ammmazing instructor

Great Work👍👍👍

Thank you so much sir

Very nicely explained

You make so much sense when explaining do you have more courses?

This is really good, thank you very much

Thanks a lot! Do you have another on validation?

I have checked the code in this lesson and everything works except the Topics area. I look at the error I get from it and it says " cannot appear as a child of ." and "The tag is unrecognized in this browser." like I said everything works but it will not show the three choices. I do like your course and would recommend it to anyone. If you have any ideas on how to fix this, let me know please.

Very well explained. Thanks :)

Great video as always!!! I was expect video on "Redux-Form". I Hope you will surely create on that..Thanks :)

Excellent tutorial

thanks for your teaching sir.

keep uploading react topics .Thank you so much

Functional Component or Class Component which is more beneficial then other and which should have used

for controlled component 6:33 isnt binding required like before you mentioned ?

Hi, I tried your code sample & is working perfectly. But I wanted to make a small change where I am struck now. How to get the combo box text instead of the value? That is, I want the text "React" and not the value "react". Please help me to figure this out. Thanks!

Great tutorial!

Wonderfull explantion...May god Bless you..

Great, thanks. It helped a lot.

Awesome tutorial !!! Thx !!!

so is there a video on how to actually submit a form that goes to an email address?

So, am I the only one who finds it's odd to write a handler function to each and every field in the form ? also, most of the code is repeated in those functions.. I don't think this approach is used in real time projects. So, if you have done any real time project using react, Do you have a better approach?

Bestest till now...I've understood the form handling such a way that I can readily work on this now..thank you so much buddy ❤️🫰

the content is great i just have one dout please clear some one why dont we bind the handelUserChange method in the constructor

It will helpful current version of react?

why did we not bind the the event handlers as told in earlier videos ??

Form chyumpo redux form vs formik vs react-hook-form difference chyamo.. which one is better

You are best sir ....

Here , the on submit is passed to form tag not to button ,but on change is passed to input. How does react know that when we click button it has to alert .

Awesome Content Bro .