ReactJS Tutorial - 21 - Basics of Form Handling 

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!

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

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

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

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

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.

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)

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.

just got to know your channel from a friend....i don't know why RU-vid 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.

Thank you for your CLEAR explanations. Great teacher!!

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

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

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

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

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

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

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

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

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 👍...

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.

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.

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.

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

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

Can't get enough of these.

This man here is a lifesaver. Thank you

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

Great Job! Really clearly understood tutorial.

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

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

Fantastic tutorial! Much gratitude.

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

IT WAS FANTASTIC! Thank you very VERY much!

Love the way he explains things

From bottom to top great explanation :)

Completed video 21. Thank you 🙂

Thank you so much for the very clear explanation!

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

Many Many Thanks sir for crystal clear explanation

superb tutorial series ever

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

keep uploading react topics .Thank you so much

Really I'm Speechless Buddy..Thanks a lot

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

Awesome tutorial !!! Thx !!!

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 Video Big fan of your tutorial from nepal

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

thanks for your teaching sir.

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

completed video 21. Thank you 🙂

good knowledgable video quite useful.

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 })); }; ...

Great job man! 👍

Awesome Content Bro .

Wonderfull explantion...May god Bless you..

Great, thanks. It helped a lot.

Very nicely explained

Thanks, well explained!

Wow,man you are a good teacher

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

Very well explained. Thanks :)

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

This is really good, thank you very much

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 😀

Absolutely wonderful

you are an ammmazing instructor

Great tutorial!

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

Excellent tutorial

Great Work👍👍👍

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

Thanks a lot! Do you have another on validation?

Thank you so much sir

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?

Great Sir...

Great video sir

Awesome tutorial

You are best sir ....

Great tutorial!! :-D

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

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!

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?

Can't we do event binding over here, so that we can use non-arrow functions? If we can do so, can we have event as parameter?

Amazing Video

Thankyou so much

you are great bro

thank you very much

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?

i always consider a form handling means method and url to which it will be posted. it just html of form.

Hello sir, for the select option, if the user does not change the option and hits the submit button then the state not get updated with the default option value right? how can we pass the default selected value to the state?

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

so good 👏👏👏

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?

Thank you

There is an issue here, when first time form loads and if we not change the select value then it wont show any select value.... please update here!!!!

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