How To Set Up Controlled and Uncontrolled Forms in React

Today I am going to break down controlled and uncontrolled forms in React and why we would use them!

(React is a framework for JavaScript. If you are interested in learning more about it, you can view excellent documentation here.)

THE DIFFERENCE BETWEEN THE TWO

The difference between a controlled form and an uncontrolled form is purely in how we store the values inside the form inputs. On the client side the form may be exactly the same, but the way the information is handled is completely different. If you are familiar with handling forms with Vanilla JS, that is essentially an uncontrolled form, with data being stored in the DOM. However, in a controlled form, the data is stored within the component, inside its state.

To demonstrate, I’ve created a basic React app with a form for creating a travel bucket list (#2020…one can dream, right?). Here is what the basic form looks like before we add synthetic events:

UNCONTROLLED FORMS

First, we’ll start with uncontrolled forms (You can see the React documentation about it here). They can be done in several different ways, but the most common way is through refs, which are instance variables that can be used throughout a class component. Refs are initialized through the function React.createRef(). Step one is to initialize the refs inside the constructor method:

constructor() {
   super()
   this.locationInput = React.createRef()
}

After that, assign the ref you would like to use inside the corresponding input tag like so:

<label>Location:</label><br/>
<input type="text" name="location" ref={this.locationInput}></input>

Finally, create a function that handles submitting the form, and you can access that ref input to manage the data however you please:

handleSubmit = (event) => {
   event.preventDefault()
   console.log(this.locationInput.current.value)
}

That’s it! Here’s what all of the code looks like:

This is the most simple way to build out a form, but of course there are some downsides. The biggest one, in my opinion, is that any sort of validations can only happen once a user presses submit, rather than as they are filling out the form.

CONTROLLED FORMS

Now let’s move on to my preferred version of forms: controlled (I am a type-A control freak, after all). Again, you can learn more in about controlled components in the very thorough React documentation here. The first step is to set up your state with each input in the form you would like to control. In this example I’m just going to focus on location again.

state = {
   location: ""
}

With this state set up, I’m now going to create a handleChange function that will take whatever value is inside the corresponding input and update that to the state.

handleChange = (event) => {
   this.setState({location: event.target.value})
}

Now, we can call on that function inside the Location input using the onChange event listener:

<input type="text" name="location" onChange={this.handleChange}> </input>

Now, we can update our handleSubmit function to grab onto those input values directly through the state!

handleSubmit = (event) => {
   event.preventDefault()
   console.log(this.state.location)
}

Not too bad, huh? Again, here is the entire component for reference:

CONCLUSION

In the end, it’s up to you which way you use…as I mentioned above, I personally prefer controlled forms because it allows you to have more direct form validation, and it’s also what the React documentation recommends using for forms. Hope this helps and happy coding!