Demon Tech Roadmap

React

React Forms

React handles form inputs by syncing them with state.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

In standard HTML, input boxes store their own data. In React, developers use state to store the input data securely. This concept is called a "Controlled Component," where React completely controls what the user types.

Example

1/* this handles a form input */
2function MyForm() {
3  const [name, setName] = useState("");
4  return (
5    <input 
6      value={name} 
7      onChange={(e) => setName(e.target.value)} 
8    />
9  );
10}

Key Points

The `value` prop links the input directly to a state variable.
The `onChange` event updates the state whenever the user types.
A controlled component prevents invalid data submission.
The `onSubmit` event handles the final form submission.

Up Next

Continue your journey with the next topic.

Go to React Context API ❯