Form state
- React Native course
- Intermediate
- Lesson 31/116
- 5 min
Learn form state management.
A form state object
A form contains several fields: name, email, password. Instead of opening a separate useState for each field, it is cleaner to keep them all in one object state. const [form, setForm] = useState({ name: "", email: "" }); holds every field in a single state.
When you update, you use the object spread: setForm({ ...form, name: "Alex" }). Here ...form copies all existing fields into the new object; name takes its new value. The email field stays unchanged. A single state makes managing the form from one place easy; when you submit you only read the form object. This pattern grows more valuable as the number of fields rises.
Update with a computed property
Sometimes you know which field to update only dynamically. For example the onChangeText handler can take the field name as a parameter. In that case you use a computed property: setForm({ ...form, [field]: value }).
Here the square brackets around [field] turn the value of field into the property name. So if field = "email" then [field]: value becomes email: value. This way a single handler can manage several fields: const handleChange = (field, value) => setForm({ ...form, [field]: value });. This is the most common way to manage form fields from one place. Code duplication drops, readability rises.
Practice Write two fields with form state
Write a LoginForm component. Start form state with { email: "", password: "" } using useState. Return two TextInputs: the first has value={form.email} and onChangeText={(text) => setForm({ ...form, email: text })}. The second has value={form.password} and onChangeText={(text) => setForm({ ...form, password: text })}. Add the secureTextEntry prop to the second.
Starter code
// Import useState
// Import TextInput from react-native
function LoginForm() {
// Start form state (email and password)
return <></>;
}Sample solution
import { useState } from "react";
import { TextInput } from "react-native";
function LoginForm() {
const [form, setForm] = useState({ email: "", password: "" });
return (
<>
<TextInput
value={form.email}
onChangeText={(text) => setForm({ ...form, email: text })}
placeholder="Email"
/>
<TextInput
value={form.password}
onChangeText={(text) => setForm({ ...form, password: text })}
placeholder="Password"
secureTextEntry
/>
</>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Update one field with spread
setForm({ ____, name: "Ayşe" });setForm({ ...form, name: "Ayşe" });Explanation: ...form copies existing fields into the new object.
2 Match the concept to its role
| Term | Meaning |
|---|---|
form |
Holds all fields |
setForm |
Updates the form object |
...form |
Opens existing fields |
[field] |
Picks the field name |
3 Why use ...form when updating form state?
setForm({ ...form, name: text });- So the new object is smaller
- To clear the state
- To keep the other fields Correct answer
- To add a new field
Explanation: ...form keeps the fields that are not updated.