ReactJS Tutorial – 21 – Basics of Form Handling
- May 26, 2024
- Posted by: MainInstructor
- Category: Angular Go JavaScript React VSCode
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703371865_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 21 – Basics of Form Handling
alright guys in this video we are going to learn the basics of working with forms in react we will see how to capture input from form elements like the input tag text area tag and also a select tag and have the data available for form submission in regular HTML form elements like input text area and so on are responsible on their own to handle the user input and update their respective values but what we want is for react to control the form elements instead such form elements whose value is controlled by react is called a controlled component now this sounds harder than it is let me break it down and then we can take a look at the code consider an input element the input element can have a value the input elements value can also change based on user interaction for example a user typing in their email address now how do we deal with values that can change within the component view state and said state so in a controlled component the value of the input field is set to the state property next we have an unchanged event fired whenever there is a change in the input fields value in the unchanged handler we use the set state method to update the state when the state gets updated the render method is called and the new state is assigned as a value to the input element so there is this cycle of setting the initial value from the state propagating the changed value to the state and then back to the input field react will always have access to the component state which reflects the updated values of the form element that state object can then be used to submit the form data when needed so let’s see how all of this translates the code back in our project I am going to create a new file called form dot Jas within the file I’m going to create a new class component using the react snippet RCE I’m going to remove the name export and add some text to the return statement form component now in that component I’m going to include the form component if you save the files and take a look at the browser you should be able to see the text form component now let’s add our very first form control in the form component I’m going to replace the existing j6 with a form tag within the forum tag a label that says user name followed by the corresponding input if we save the file and take a look at the browser you should be able to see the label and the input field right now though the form is regular HTML it is not a controlled react component to convert this into a controlled component we need to follow two steps the first step is to create a component state that we control the value of the input element so within the component I am going to use the snippet R Const to create a constructor I’m going to add a new state property called user name and initialize it to an empty string next I am going to assign this state property as the value of the input element so input type is equal to text and value is going to be equal to this dot state dot username now if you go back to the browser and try to type in a username you’re going to find out that the input doesn’t reflect the changes which brings us to the second step handling the on change event so back in a component I’m going to create an on change event handler so on the input element let’s listen to the on change event and assign a handler called handle username change now let’s define the method as a class property so handle user name change and the property is going to be equal to an arrow function it just so happens that when you assign a handler to the unchanged event the event itself is passed as a parameter to the handler so we have one parameter called event from this event we can extract the value of the input element using event target dot value so anytime you change the input value that value is captured using event dot target dot value all we have to do is simply assign this captured value back to the state property and to update the state we will be using the set state method so within the function body this dot set state user name set to event dot target dot value now let’s save this and test it out in the browser if I type in my name you can see that it works the difference now though is that we are working with a controlled component and react state is the single source of truth for this input element you can see that we have user name as a state property which is supplied as a value to the value attribute of the input element whenever there is a change that new value is propagated to handle user name change which sets back the state property user name to the updated value and when the state is said the render method is called again and the new value is available to the value property and that is how we have a controlled component next let’s try to create controlled components for a text area as well as a select tag this will also help you get used to the controlled component way of working with form elements there are three simple steps add the element HTML assign the component state to the element value and assign an unchanged handler that updates the state let’s begin with step 1 adding the HTML so within the form I’m going to add a new div tag that has a label called comments and a text area second step assign the component state to the element value so I’m going to create a new state comments which is initialized to an empty string and on the text area element value is equal to this dot state dot Commons the third and final step is to assign the change handler that updates the state on change is equal to this dot handle comments change handle comments change is going to be a class property so is equal to an arrow function which takes event as its argument and we are going to call this dot said state passing in comments with event dot target dot value if we save the file and take a look at the browser you should be able to see the text area type in something and it should work as expected now let’s quickly take a look at the Select tag again we have three simple steps step one add the HTML we are going to have a label that says topic and then the Select tag and as options we are going to have react angular and view so three options react angular and view and the respective values in lowercase step to assign the component state to the element value so I’m going to create a new state property this is going to be topic and initially let’s set it to react on the select tag we can add the value attribute and this is going to be said to this dot state dot topic step 3 assign the change handler that updates the state so on change is going to be equal to this dot handle topic change which is going to be a class property similar to the previous handlers this dot said stay topic is going to be equal to event dot target dot value if we save the file and take a look at the browser you should be able to see the Select field by default react should be selected as the topic and you should also be able to select any of the other options so there you go an input element a text area and a select tag all of them as controlled components in react let’s wind up this video by understanding how we can submit this form data I’m going to go back to vs code and in the JSX I’m going to add a submit button if you go back to the browser and click on the submit button you can see that the page refreshes so right now the form has the default HTML form behavior of browsing to a new page when the submit button is clicked a common approach however is to have a JavaScript function that handles the submission of the form and that method will also have access to the data that the user entered into the form so back in vs code on the form tag we are going to assign a handler to the on submit event this dot handled submit now we can define the handler handle submit and this is going to be equal to an arrow function which is going to receive event as an argument and to retrieve the form data that the user has entered into the form we use the component state for now let’s simply alert those values alert within backticks dollar curly braces this dot state dot username this dot state dot comments and this dot state dot topic and of course I’m missing the fat arrow syntax if you now go back to the browser fill in the details and click on submit you should be able to see the elect message with the form data when I dismiss the alert though you can see that the page refreshes and the filled in data is lost to avoid this we simply add an event dot prevent default this will prevent the default behavior of form submission so back in handle submit after the alert statement event dot prevent default if I now go back to the browser fill in the details and click on submit you can see that we have the alert message when I click on OK the page doesn’t refresh now suppose you don’t really have a form tag with which you can listen to the on submit event what you can do is create a button create an on click event handler on the button and have the exact same body as the on submit event now again type is equal to submit will give the user the ability to submit forms by hitting the enter key which is always good so please do consider user experience when developing your forms alright that is pretty much what I have on the basics of working with forms in react as Katrina I will be structure the state properties in the render method so Const username comments and topic from this dot state now I can remove this dot state from all three occurrences all right thank you guys for watching feel free to subscribe and I’ll see you guys in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
It will helpful current version of react?
are these lesson still okay to watch at the moment
please i need a reply 😊😊
Bro you are really very fast. Slow it down man. Lot of braincells are consumed by pausing 1000 times in between the video.
How does your arrow function => looks exactly like an arrow ??
completed video 21. Thank you 🙂
Completed video 21. Thank you 🙂
Thanks so much, sir Vishwas. You are the best.
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?
for controlled component 6:33 isnt binding required like before you mentioned ?
Thank you
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)
why don't we need to bind handlers with this here?
thank you very much
Can u explain y the props(constructor,super) is used here
is this tutorial is relevant for any guys learning react in 2023. Because this playlist is old.
superb tutorial series ever
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 ❤️🫰
Sweet
Functional Component or Class Component which is more beneficial then other and which should have used
Sir can you please provide us code file sir 🤔 @Codevolution
It would be great if it's possible
Hi, you are a great tutor, you breaks everything into a simpler steps. Is there any video for form handling in functional components
Thanks
How did it work without binding this?
for me it didn't work nomally as in the vid so instead what worked for me is seeting the onChange just like that :
onChange={(e)=>this.handleUsernameChange(e)}
in order to let me type inside !
edit : it worked but that works too lol
You really have the gift of teaching. Thanks for this video and this fantastic whole series.
sir why we are not binding event handler here? onChange event?
I have learned a lot from your youtube video. Thank you very much!
love u <3
Thank you so much for the very clear explanation!
you are great bro
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
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 <select> 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?
Great video sir
I saw at other places this, for example -> in this case, inside of a constructor: this.handleUsernameChange = this.handleUsernameChange.bind(this). Some explanations?
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
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.
rcc for creating classs componenets
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 👍…
Great video as always!!! I was expect video on "Redux-Form". I Hope you will surely create on that..Thanks 🙂
👍
bro what if we have around 25 input fields?
it might become to heptic and annoying to manage os much state and function.
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.
so is there a video on how to actually submit a form that goes to an email address?
Fantastic tutorial! Much gratitude.
Very well explained. Thanks 🙂
Oh, I am using Firefox developer browser
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 " <options> cannot appear as a child of <select>." and "The tag <options> 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.
Hi, is there a way to have this video redone for functional components rather than class components?
Many Many Thanks sir for crystal clear explanation