React Forms

Table of Contents +

In the last lesson you learned about React Sorting Lists, so you know how to arrange data before showing it. This lesson flips that around: forms are how the user sends data into your app, and React handles them a little differently from plain HTML.

🤔 Why do forms matter?

Almost every app you use is full of forms. Here’s where they show up.

A login or signup page asks for your email and password. That’s a form.
The search bar at the top of YouTube or Amazon is a form too.
Writing a comment, sending a message, picking a date, choosing from a dropdown. All forms.
A form is just the way an app collects user input and does something useful with it.

So if you want to build anything real, you have to be good at forms. They are the main bridge between the user and your code.

⚖️ Controlled vs uncontrolled inputs

In React there are two ways to handle an input. This is the one big idea to understand up front.

A controlled input means React state is the source of truth. The value lives in state, and you wire it up with value and onChange.
An uncontrolled input means the DOM holds the value itself. React does not track it. You read it later with a ref, only when you need it.
“Source of truth” just means the one place that holds the real, current value. For a controlled input, that place is your state.

A quick way to remember the difference is who is holding the value.

Question	Controlled	Uncontrolled
Who holds the value?	React state	The DOM input itself
How do you read it?	From state, anytime	With a ref, when needed
How do you wire it?	value plus onChange	A ref on the input
Easy to validate live?	Yes	Not really

🎯 Why React favors controlled inputs

Most React forms you’ll see use controlled inputs. There’s a good reason for that.

When state drives the input, the screen always matches your data. No surprises, no two values fighting each other.
You can check what the user typed on every keystroke. So live validation is easy, like turning the border red when the email looks wrong.
You can transform the text as it comes in, like forcing it to uppercase or trimming spaces.
You can also clear the form, fill it from a server, or disable a button until the input is valid. All of that is simple because the value is just state.

So controlled inputs give you full control over what the user sees and types. That’s why we lean on them.

Uncontrolled is not wrong

Uncontrolled inputs are fine for simple cases, like a quick form where you only read the value once on submit. But controlled inputs are the default React way, and they scale better as your form grows. We’ll cover both properly in the next lessons.

🧩 The basic shape of a React form

Every controlled React form follows the same simple pattern. Once you know the shape, all forms feel the same.

You keep the input’s value in state with useState.
You update that state with onChange on every keystroke.
You handle the submit with onSubmit on the <form> tag.
You call e.preventDefault() first, so the browser does not reload the page.

So the four pieces are: state, onChange, onSubmit, and preventDefault. Keep that pattern in your head and the rest is just filling in details.

💡 A tiny controlled input example

Let’s see the smallest possible controlled form. The user types a name, hits submit, and we show a greeting, with no page reload.

import { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  function handleSubmit(e) {
    e.preventDefault();          // stop the page from reloading
    alert("Hello, " + name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Greet me</button>
    </form>
  );
}

Here’s what each line is doing.

const [name, setName] = useState("") makes a piece of state that starts as an empty string. This holds whatever the user types.
value={name} ties the input to state. So the box always shows exactly what name holds. That’s the controlled part.
onChange={(e) => setName(e.target.value)} runs on every keystroke and saves the new text into state.
onSubmit={handleSubmit} runs when the form is submitted, by click or by Enter. Inside it, e.preventDefault() stops the reload, then we use the value.

Output

(user types "Riya" and clicks Greet me)

Hello, Riya

So that’s the whole loop, and every form you build is just a bigger version of this:

State holds the value, so there’s one place that knows what the user typed.
onChange keeps that state fresh on every keystroke.
onSubmit uses the value when the user is done.

value and onChange go together

On a controlled input, always pair value with onChange. If you set value but forget onChange, the box becomes read-only and the user can’t type into it. We’ll see why in the controlled components lesson.

🧩 What You’ve Learned

✅ Forms are how an app collects user input, like login, signup, search, and comments
✅ A controlled input keeps its value in React state, wired up with value and onChange
✅ An uncontrolled input lets the DOM hold the value, and you read it later with a ref
✅ React favors controlled inputs because state drives the UI and validating or transforming input is easy
✅ The basic form shape is state plus onChange plus onSubmit plus e.preventDefault()
✅ e.preventDefault() stops the browser from reloading the page on submit

Check Your Knowledge

Test what you learned. Pick an answer for each question, then click Check.

🚀 What’s Next?

Now you’ve got the big picture of forms in React: what controlled and uncontrolled mean, why state is the source of truth, and the basic shape of a form. Next we’ll go deep on the controlled approach and build it step by step.

React Controlled Components

Previous React Sorting Lists Next React Controlled Components

Share & Connect

Share on LinkedIn