~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/react/9react-forms

# Forms in React

React uses controlled components where form elements are driven by state.

## Controlled Inputs

Bind input values to `useState` to control them:

```jsx
function Form() {
  const [name, setName] = useState("");

return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}
```

The input always reflects the state value.

## Handling Submission

Prevent the default form action and use the state:

```jsx
function Form() {
  const [email, setEmail] = useState("");

const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitted:", email);
  };

return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}
```

## Multiple Inputs with One Handler

Use the `name` attribute to handle many fields with a single function:

```jsx
const [form, setForm] = useState({ name: "", email: "" });

const handleChange = (e) => {
  setForm({ ...form, [e.target.name]: e.target.value });
};

<input name="name" value={form.name} onChange={handleChange} />
<input name="email" value={form.email} onChange={handleChange} />
```

## Textarea and Select

These also use `value` and `onChange`:

```jsx
<textarea value={bio} onChange={(e) => setBio(e.target.value)} />

<select value={color} onChange={(e) => setColor(e.target.value)}>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>
```

## Best Practices

1. Always use `value` and `onChange` for controlled inputs
2. Call `e.preventDefault()` in the submit handler
3. Initialize state for every controlled field

## Common Mistakes

1. Forgetting `e.preventDefault()` causes full page reloads
2. Using `defaultValue` instead of `value` breaks control
3. Not initializing state leads to uncontrolled warnings

No changes yet

cancel