React Forms

React Forms

Just like in traditional HTML, React utilizes forms to allow users to interact with and input data into the web page. Adding forms in React is slightly different because React likes to handle the form's state itself.

Controlled Components

In React, form data is typically handled proactively by the React components rather than being left to the DOM. When the React component's state acts as the "single source of truth" for the input element, it is referred to as a "controlled component".

import { useState } from 'react';

function MyForm() {
  const [name, setName] = useState("");
  return <input type="text" value={name} onChange={(e) => setName(e.target.value)} />;
}