Flash cards
Review the key moves
What is the main idea behind React Forms - Multiple Input Fields?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ { useState } from 'react';Put the learning moves in the order that makes the concept easiest to apply.
Handling Multiple Inputs
When you have multiple controlled input fields in a form, you can manage their state either by:
- Using a separate useState call for each input.
- Using a single useState call with an object to hold all form field values.
We will use the second approach, as it is more common for forms.
Make sure each input field has a unique name attribute.
Also, when initializing the state, use an object instead of a string. If the input fields have no initial value, use an empty object.
Example
Use the useState Hook to manage the input:
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (e) => {
const name = e.target.name;
const value = e.target.value;
setInputs(values => ({...values, [name]: value}))
}
return ( <form> <label>First name: <input
type="text"
name="firstname"
value={inputs.firstname}
onChange={handleChange}
/> </label> <label>Last name: <input
type="text"
name="lastname"
value={inputs.lastname}
onChange={handleChange}
/> </label> <p>Current values: {inputs.firstname} {inputs.lastname}</p> </form> )
}
createRoot(document.getElementById('root')).render( <MyForm /> );Example Explained
The first thing to notice is that when using a single useState call, we use an object to hold any initial values. In this case, with no initial values, we use an empty object:
const [inputs, setInputs] = useState({});In the function, we access the input fields in the event handler using the e.target.name and e.target.value syntax.
To update the state, use square brackets [bracket notation] around the property name.
function handleChange(e) {
const name = e.target.name;
const value = e.target.value;
setInputs(values => ({...values, [name]: value}))
}When refering to input values, we add the name of the state object, inputs , as well as the name of the input field:
<input
type="text"
name="firstname"
value={inputs.firstname}
onChange={handleChange}
/> <input
type="text"
name="lastname"
value={inputs.lastname}
onChange={handleChange}
/> <p>Current values: {inputs.firstname} {inputs.lastname}</p>Initial Values
To add initial values to the input fields in the example above, add the proper keys and values to the useState object:
Example
Use initial values for firstname and lastname:
function MyForm() {
const [inputs, setInputs] = useState({
firstname: 'John', lastname: 'Doe'
});
...