Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
7.5: Controlled Forms

Introduction

React convention is to "control" form input values using component state. In the following example we retrieve user input using the onChange event callback, and set the value attribute of the input element using a state variable name.
1
function Form() {
2
// Control the form input value using a state variable name.
3
const [name, setName] = useState("");
4
​
5
const handleChange = (event) => {
6
// Retrieve input field value from JS event object.
7
const inputName = event.target.value;
8
// Log input field value to verify what we typed.
9
console.log(inputName);
10
// Set the value stored in component state to be the new value.
11
setName(inputName);
12
};
13
​
14
// The value of the input field always matches the value in the state
15
// variable name. When the input value changes, handleChange updates
16
// the value in the state.
17
return (
18
<div>
19
<input value={name} onChange={handleChange} />
20
<div>Name: {name}</div>
21
</div>
22
);
23
}
Copied!
The following is an illustration of the above mechanic of controlling the input field's value using a component state variable name.
Controlling input field value using a state variable.
The above logic gives the onChange callback function control over the input field's value, because it can determine if and how it sets the value of the input field by deciding whether to call setName, or modifying what it passes to setName.

Example: All Uppercase

To demonstrate the power of controlled inputs, let's restrict and format the input field's value and the state variable _as the user types. _In handleChange we transform the input value so it's only ever uppercase, regardless of what the user types.
1
function Form() {
2
const [name, setName] = useState("");
3
​
4
// Convert all user input to uppercase such that it's not possible
5
// for the user to input lowercase characters.
6
const handleChange = (event) => {
7
// Retrieve input field value from JS event object.
8
const inputName = event.target.value;
9
// Log input field value to verify what we typed.
10
console.log(inputName);
11
// Convert input name to upper case
12
const uppercaseInputName = inputName.toUpperCase();
13
// Set the value of the input field to the uppercase input name
14
setName(uppercaseInputName);
15
};
16
​
17
return (
18
<div>
19
<input value={name} onChange={handleChange} />
20
<div>Name: {name}</div>
21
</div>
22
);
23
}
Copied!

Example: Input Validation

With controlled forms we can also enable validation as the user types. We can use the JS function match and a regular expression to check if the input contains any non-alphabetical characters. This input validation prevents the user from typing anything non-alphabetical into the input.
On line 9 we write a condition to see if we want to set the name. If we don't nothing will appear in the input when we type.
1
function Form() {
2
const [name, setName] = useState("");
3
​
4
const handleNameChange = (event) => {
5
// Retrieve input field value from JS event object.
6
const inputName = event.target.value;
7
// Log input field value to verify what we typed.
8
console.log(inputName);
9
// Only update the input field's value if the input only contains letters.
10
if (inputName.match(/^[a-zA-Z]+$/)) {
11
setName(inputName);
12
}
13
};
14
​
15
return (
16
<div>
17
<input value={name} onChange={handleChange} />
18
<div>Name: {name}</div>
19
</div>
20
);
21
}
Copied!

Caveats

Controlled forms and key-stroke-validated forms may not be the right choice for all situations. Some form validation may be better run after the input field has have been completely filled, for example when validating username selection. For multi-input forms we might also add a submit button, and potentially only run validation on form submit. On submit, this multi-input form would be able to read all state variable values set by form inputs.

React Docs: Controlled Forms in Class Component Syntax

Last modified 2mo ago