Loading lesson path
When you have multiple controlled input fields in a form, you can manage their state either by:
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>
Formula
< label > First name:<input type="text" name="firstname"
value={inputs.firstname}
onChange={handleChange}/> </label>
Formula
< 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 »
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({});Next, the handleChange function is updated to handle multiple input fields. 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>To add initial values to the input fields in the example above, add the proper keys and values to the useState object:
Use initial values for firstname and lastname:
function MyForm() {
const [inputs, setInputs] = useState({
firstname: 'John', lastname: 'Doe'
});...
Example »