Submit

Learn form submit and onSubmit.

Form submission

A form is submitted after the user enters the data. In React Native submission is usually bound to a Button's onPress. In the submit handler you run validation and, if there is no error, you process the data.

Example: function handleSubmit() { if (!validate()) return; sendToServer(form); }. If validate returns false you exit early with return and submission stops. If validation passes the data is sent through a function such as sendToServer. You bind it to the button with onPress={handleSubmit}. The onSubmit event from the web does not exist in React Native; instead you use onPress. It is also common to disable the button during submission to prevent double sends.

Early return for validation

The first line of the submit handler is usually validation. If validation fails you exit early with return. This prevents the rest of the submission from running.

Example: function handleSubmit() { if (!form.email.includes("@")) { setErrors({ email: "Invalid" }); return; } console.log(form); }. If the email is invalid the error is set and the function exits; console.log does not run. This pattern makes the code readable; you get a flat flow instead of deep nested if blocks. You can run several checks in a row; each one exits early if it fails. This pattern is called a guard clause. Early return clarifies the function's purpose.

Exercise Add form submission

Write a SignupForm component. Start email state with useState. Write a handleSubmit function: if not email.includes("@") exit with return. If it passes call console.log(email). Bind it to the button with onPress={handleSubmit}.

Show example solution

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

function SignupForm() {
  const [email, setEmail] = useState("");
  function handleSubmit() {
    if (!email.includes("@")) return;
    console.log(email);
  }
  return (
    <>
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
      />
      <Button onPress={handleSubmit} title="Submit" />
    </>
  );
}

Test yourself

Which prop handles form submission in React Native?
```
<Button onPress={handleSubmit} title="Gönder" />
```
- onPress
- onClick
- onSubmitForm
- onSubmit
Show answer

onPress — In React Native button press is caught with onPress.

Bind the submit handler to the button

<Button onPress={____} title="Gönder" />

Show answer

<Button onPress={handleSubmit} title="Gönder" />

Match the concept to its role

handleSubmit

Submit handler
onPress

Binds to button
return

Early exit
validate

Rule check

Next lesson: Form libraries

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies