Summary - Form handling

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.

Exercise Registration form state

Write a RegisterForm component. Start form state with { name: "", email: "" } using useState. Also start errors state with {}.

Show example solution

import { useState } from "react";
import { TextInput } from "react-native";

function RegisterForm() {
  const [form, setForm] = useState({ name: "", email: "" });
  const [errors, setErrors] = useState({});
  return null;
}

Exercise 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}.

Show example 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" />
    </>
  );
}

Test yourself

When does validation run in the registration form?
```
function handleSubmit() { /* ... */ }
```
- Only when the component mounts
- Only during render
- Before submission
- Never
Show answer

Before submission — Validation runs before submission.

Call the submit handler

function ____(form) { console.log(form); }

Show answer

function handleSubmit(form) { console.log(form); }

Match the concept to its role

controlled

value and onChangeText
form state

Holds all fields
validation

Rule check
onPress

Binds to button

Next lesson: fetch

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies