Controlled Forms in React

I'm coming to the end of my second phase of coding boot camp. This phase taught us about using the React framework, after having learned JavaScript in the first phase. I loved how much more organized React is and that it allows you to write code that looks like HTML. I found it to be a bit more user friendly, though it was a bit tricky to understand some of the ways it works. One of the trickiest things for me to understand is how to set up controlled forms, so I decided that would be the best topic for my next blog!

My understanding of the benefit of controlled forms is that we have better control of user entered data since it's updated in real time using the State Hook as the user inputs it on the form. The component re-renders each time the state variable changes, rather than having to manually refresh the page. If needed, other components or elements can use state values, which is helpful if you need to render form input on the page after it’s submitted.

To set up a controlled form, a state variable is needed, as well as a function that updates state when the form input changes.

Before setting up state, be sure to import the state hook. Refer to the React State Hook page for more info about state.

import React, { useState } from "react";

For controlled forms, the state variable is typically used to set the default input value as an empty string to reflect the empty field before the user enters anything on the form.

const [inputValue, setInputValue] = useState(“”);

Next, set up a function that updates the state variable when the form input changes. A best practice is to have it console log the event target value when initially setting it up so you can confirm it's capturing the form input before setting up the function to update the state variable.

function handleInputValueChange(event) {
  console.log(event.target.value);
}

Add an onChange event listener to the input element that calls the function within curly braces.

<input
   type="text"
   name="title"
   placeholder="Title"
   onChange={handleInputValueChange}
/>

If it’s working correctly, the console log should show everything typed in the form as it’s being typed.

Now that it’s capturing the input value, we can have it update the state variable. Instead of the console log, we need to change it to setState. In the example below, it’ll setInputValue to the event target value. If you have it console log the state variable outside of the function, you can confirm that the state variable is being updated as the user types something in the form’s input field.

function handleInputChange(event) {
  setInputValue(event.target.value);
}

console.log(inputValue)

That’s it! Now we have a basic set up for a controlled form. This can be done with each input field if there is more than one. It can also be used on other form elements, such as select. When you set up a function for the submit event, you can have it set the state variable back to an empty string to clear out the user’s input from the field after they click the submit button.

Hopefully this will help you make sense of controlled forms! React Forms is a great resource for setting up controlled forms. Happy coding!