{
  "id": 2652060,
  "title": "Forms in React : From Inputs to Controlled Components",
  "url": "https://urgent.news/2026/08/22/forms-in-react-from-inputs-to-controlled-components",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-22T20:56:31.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/silaslelei/forms-in-react-from-inputs-to-controlled-components-2e23"
  },
  "original_language": "en",
  "account": "In the world of web development, HTML forms have always been a fundamental building block for user interaction. These forms typically reload the entire page whenever a user submits data, clearing any changes or inputs made. However, React offers a more controlled approach to handling form inputs and behavior.\n\nTraditionally, HTML forms are considered uncontrolled inputs, meaning there's no single source of truth for the value of a field. This can lead to unpredictable behavior when the form is submitted. React introduces the concept of controlled inputs, where the form's data is managed and controlled by the React state.\n\nTo create a controlled input in React, you need to add two essential properties to the input element: `value` and `onChange`. The `value` property represents the content of the input field, such as the text entered in a Name field. The `onChange` property is a function that gets triggered every time the input changes. This function is invoked each time a key is pressed within the field, allowing you to update the React state accordingly.\n\nLet's write a simple React input to illustrate this concept:\n\n```javascript\nimport { useState } from 'react';\n\nfunction Form() {\nconst [name, setName] = useState('');\n\nreturn (\n<input\ntype=\"text\"\nvalue={name}\nonChange={(event) => setName(event.target.value)}\n/>\n);\n}\n```\n\nIn this example, we declare a state variable `name` and a function `setName` to update it. We then set the `value` of the input to `name` and attach an `onChange` event handler that updates `name` with the value entered by the user.\n\nWhen the user types text into the input field, the `onChange` function is triggered, which in turn calls `setName` with the new value. This way, the React state is always up-to-date with the user's input, ensuring that the form's behavior remains consistent and predictable.\n\nHandling form submission in React is similar to HTML forms, but with an added layer of control. To prevent the default page reload behavior, you can add the `event.preventDefault()` line inside the `handleSubmit` function. By doing this, the form data remains in the React state, allowing you to manipulate it before submission if needed.\n\nFor forms with multiple fields, you can create separate state variables for each field, like `const [name, setName] = useState('');` and `const [email, setEmail] = useState('');`. However, this approach can lead to repetitive code. A more concise way to handle multiple fields is to use a single `useState` with an object, like `const [formData, setFormData] = useState({name: '', email: '', password: ''})`. This consolidates all the input states into one variable, making the code cleaner and easier to manage.\n\nReact supports various input types, such as checkboxes and select dropdowns, with similar logic and minor tweaks to the properties used. The key is to maintain control over the state and ensure that the form's behavior aligns with your expectations.",
  "summary": "You have probably written HTML forms before, and so the structure below resonates with you. Perhaps you even smile because, this one, you understand. <form> <input type= \"text\" /> <button> Submit </button> </form> If you have done this, you know what happens when you click the button. The whole form reloads, the changes or inputs are cleared. This is the default behavior of forms in HTML. In…",
  "key_points": [
    "React introduces controlled inputs for form management",
    "Controlled inputs use React state (value and onChange)",
    "Prevent default reload with event.preventDefault()"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}