How to Handle Forms in React

In React, a controlled input is one where the value is driven entirely by React state. The input's value prop is set to a state variable, and every keystroke updates that state through an onChange handler. An uncontrolled input lets the DOM manage its own value and you access it via a ref. Controlled inputs are the recommended approach in React.

For each form field, create a corresponding state variable using useState. Initialize each state variable to an empty string or an appropriate default. The state variable is the single source of truth for what the input currently contains.

On each input element, set the value prop to its corresponding state variable and set the onChange prop to a handler function. Inside the handler, call the setter with event.target.value. This two-way binding ensures the state always reflects what is in the input and the input always reflects the state.

For forms with many fields, you can manage all values in a single state object instead of multiple useState calls. Use a single onChange handler that reads event.target.name to identify which field changed and updates the corresponding property in the state object using the spread operator to preserve other fields.

Add an onSubmit handler to the form element. Inside the handler, call event.preventDefault() as the very first line. This stops the browser from reloading the page, which is the default HTML form behavior. Without this, your React state resets and any API calls are interrupted.

Create an errors state object to track validation messages. Before submitting or on blur, check each field against your rules. For example, check if the email contains an at sign or if a required field is empty. Update the errors state with appropriate messages. Display these error messages below the corresponding inputs conditionally.

Below each input field, conditionally render an error message paragraph that appears only when the corresponding error state property is truthy. When the user corrects the input and it passes validation, clear that specific error by setting it back to an empty string. This gives real-time feedback without overwhelming the user.

After a successful form submission, reset all state variables back to their initial empty values. This clears the form fields visually because the inputs are controlled by state. Also clear any error messages. If the form is inside a modal or wizard, this reset prepares it for the next use.