Submitting a form

What this means

In React, a form can use onSubmit to run a function when the user submits. For client-side handling, call event.preventDefault() so the browser does not reload the page.

In beginner terms, this topic answers one practical question: "What should I write, and why does React care about it?" Do not try to memorize the syntax first. First understand the idea, then connect the syntax to that idea.

Why it matters

Forms are one of the most common app workflows. Login, search, settings, checkout, comments, and admin content all depend on clean form handling.

When you build real React screens, this idea helps you decide where data should live, what the user should see, and what should happen after an interaction. That is why this lesson is part of the main path instead of being an optional detail.

Step by step

1. Notice the UI problem this topic solves. 2. Look at the smallest possible example. 3. Change one value and predict what should appear. 4. Run the example and compare the result with your prediction. 5. Use the practice task before moving on.

Small example

function handleSubmit(event) {
  event.preventDefault();
}

Common mistake

Do not put important validation only in the browser. Client validation helps users, but server validation protects the app.

Practice task

Build a form with one input and show the submitted value under the form.

Remember this

Forms collect user input; submit handlers decide what happens next.