React Forms : Controlled Components and Abstracting Input Change
Making forms more concise and dynamic
Controlled Components
In React, form inputs are handled by components. However, in HTML this is handled by the DOM. An important point that is taught while learning about forms on the React framework, is to make them controlled.
What does this mean?
Controlled components are components which are controlled by React in a way where the React component that renders a form also controls what updates within the form on further user input by updating its state.
Let’s take a look at a basic form I have created to use as an example:
Looking at this form, we can point out the multiple different sections of our form. Here we can see that our form has a username input, a password input, a version selector, a newsletter checkbox, and a sign up submission button.
In order to track the user’s input as they are typing, we need to define the state, add an event handler, and add a value that is set to the current state on all sections of our form. Note that the example below only shows the changes for the username section.
By including this code, we have a controlled component where the input value is always driven by the React state. This makes our code more dynamic as we can now also pass the value to other elements.
You might be thinking, what if we have an extremely long form? It must be quite tedious to singularly define state for each input field. And you would be right! That is why there is a method of abstracting our input changes in a less tedious, more concise manner.
Abstracting Input Changes
Eventually when we have to deal with longer forms, to make things easier for ourselves, there are additional changes that can be implemented that will make our form more dynamic and dry. The first change is to create one state variable where the useState is an object of all the inputs, instead of manually creating a state for each input. Take a look below:
For our new state variable, we can see formData is an object which contains all the previous inputs that we had defined in state earlier. The state values can be accessed with object dot notation, and we now have access to use the setter function setFormData if we ever want to update our state.
After changing all our previous state into one state object, we will also have to update each section’s input value and event handling callback. Again, note that the image below is only an example of the username input field.
With calling on setFormData in the above example, we can pass in formData with a spread operator, which will be a copy of our previous form data and tell it to access the key of username, and update the value with our user input.
That’s not all! We can further clean up our code by creating a helper function for all our event handlers. A helper function cleans up our code by extrapolating the code written within our input field to a function outside of the return value of our component function.
In the helper function, handleChange, a variable key is created to reference the target id. This is done so that when a user types in an input field, our event listener can pinpoint the input field from which the user is typing. This allows our key variable to be dynamic, and able to be read when calling on our setFormData function to locate the value of the specific key. We must pass our key variable within square brackets in order for React to recognize that key is a variable rather than a string.
And there you have it! A controlled, dry, and dynamic form field.
React considers it best practice to use controlled forms. I hope that after reading this article, you can also make your react forms more controlled, clean, and concise! If you were still unable to follow along, here are some resources I would recommend which further dives into these concepts:
React Documentation — https://reactjs.org/docs/forms.html
