Summary - Form handling
- React Native course
- Intermediate
- Lesson 35/116
- 5 min
Combine controlled, validation and submit to write a registration form.
Summary - Form handling
In this group you learned controlled forms, form state, validation, submission and react-hook-form. A controlled input works with value and onChangeText. The form state object holds every field together; it is updated with spread.
Validation uses an errors state; if there is an error you show it in a red Text. Submission is bound to onPress; an early return runs validation. react-hook-form's useForm automates all of this. Now you will combine all these pieces into a working registration form. It will have two fields, validation and submission; the user will submit when the data is valid.
Practice Registration form state
Write a RegisterForm component. Start form state with { name: "", email: "" } using useState. Also start errors state with {}.
Starter code
// Import useState and TextInput
function RegisterForm() {
// Start form state (name and email)
// Start errors state with {}
return <></>;
}Sample solution
import { useState } from "react";
import { TextInput } from "react-native";
function RegisterForm() {
const [form, setForm] = useState({ name: "", email: "" });
const [errors, setErrors] = useState({});
return null;
}Practice Write the registration component
Write a RegisterForm component. form state is { name: "", email: "" }; errors state is {}. The handleSubmit function: if not form.email.includes("@") call setErrors({ email: "Invalid" }) and return; otherwise call console.log(form). Return two TextInputs and a Button; bind the button with onPress={handleSubmit}.
Starter code
// Import useState and Button, TextInput
function RegisterForm() {
// Start form and errors state
// handleSubmit function: email check, error or console.log
return <></>;
}Sample solution
import { useState } from "react";
import { Button, TextInput } from "react-native";
function RegisterForm() {
const [form, setForm] = useState({ name: "", email: "" });
const [errors, setErrors] = useState({});
function handleSubmit() {
if (!form.email.includes("@")) {
setErrors({ email: "Invalid email" });
return;
}
console.log(form);
}
return (
<>
<TextInput
value={form.name}
onChangeText={(t) => setForm({ ...form, name: t })}
placeholder="Name"
/>
<TextInput
value={form.email}
onChangeText={(t) => setForm({ ...form, email: t })}
placeholder="Email"
/>
<Button onPress={handleSubmit} title="Submit" />
</>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When does validation run in the registration form?
function handleSubmit() { /* ... */ }- Only when the component mounts
- Only during render
- Before submission Correct answer
- Never
Explanation: Validation runs before submission.
2 Call the submit handler
function ____(form) { console.log(form); }function handleSubmit(form) { console.log(form); }Explanation: handleSubmit is the submit handler.
3 Match the concept to its role
| Term | Meaning |
|---|---|
controlled |
value and onChangeText |
form state |
Holds all fields |
validation |
Rule check |
onPress |
Binds to button |