As a web developer, you have probably interacted with HTML forms. Forms provide an interface for us to collect data from users and then perform various actions using that data. For example, a signup form collects registration data such as email, name and password from users and creates accounts for them.
Here is the source code for this article. https://github.com/r0b0tt/react-form-handling.
Basically, ReactJs has two types of form elements, controlled and uncontrolled. According to the official documentation, controlled elements control their own state and update them based on user input. Uncontrolled elements, on the other hand, rely on the DOM to handle the form data. The recommended way, however, is to use controlled components.
Whenever a user enters information in our form elements' fields, we need to store it in some sort of state. If you're unfamiliar with state management in ReactJs you can checkout out this article by Kent C. Dodds who explains it in a very simple manner.
In this article, we will be using the useState hook to store the various user details.
From the image above, you can see that we have stored all registration details using the
useState hook. We have initialized some fields so as to give default values to some of the form elements. After setting up our state, we can now get user input from our form elements and store it in our
Right now, our form elements are uncontrolled components and we need to convert them to controlled components. We do this by adding the
onChange properties to the elements. The images below show how we add the attributes to the input, select and checkbox elements respectively. Note that the values are being fetched from our userDetails state. You can view the other elements in the source code.
As you might have noticed, we have added an extra attribute on the checkbox elements called
checked. This attribute is used to set the checked state of the checkbox. In our case, it checks whether the current value exists in our opportunities array that is in our userDetails state. Another important attribute here is the
name attribute. It is used to reference that particular element. You can learn more about it here.
After converting our elements to controlled components, we can now implement our
onchange handler. An onchange event occurs when the value of an element is changed. ReactJs exposes an
onChange property on all form elements whereby we pass a function to handle input change.
Here is the function we have implemented.
handleInputChange function takes the
onchange event as a parameter. We then use object destructuring to get the
value of the current form element from the
The default behaviour will be to update our state using the
setUserDetails function exposed by our
useState hook. As you might have noticed, the
name attributes of our form elements match the keys in our
userDetails state. This allows easy and seamless updating of our state using the spread operator.
One special case here is our opportunities' checkbox elements. We have three values namely contract, partTime and fullTime. We have hardcoded these values to the elements.
In this case, we check whether the current checkbox is checked. If so, we add its value to our opportunities array, else, we find its index in the opportunities array using the findIndex method and remove it from the array using the splice method. Finally, we use the
spread operator to update our state with the new opportunities selected.
In our checkbox elements, we display the checked status by checking whether the value of the checkbox is contained in our opportunities array using the includes method.
After storing user input from our registration form, we should now handle what happens when the user clicks the create account button.
When the user clicks the button, the form details are submitted. This emits an onsubmit event from the form. We will implement a function to handle our form submission.
In our function above, we prevent the default behaviour when our form is submitted using the preventDefault method and then log our user details to the console.
In real-life scenarios, you would probably send the data to your servers so as to create that users account.
I hope this article was educative.