Event Handling and Controlled Components

A. A controlled component is an input whose value comes from React state, with every keystroke updating that state through an onChange handler, keeping the input and the state in sync at all times. The checkout form keeps every field inside one form state object, updated through a single function like update("phone", e.target.value).

B. Event handling covers how the app responds to clicks, typing, and submissions. Clicking place order runs placeOrder, which checks required fields, tests the phone number against a 10-digit pattern and the pincode against a 6-digit pattern using regex, and proceeds only if there are no errors; otherwise, it fills an errors object and shows a toast asking the user to fix the highlighted fields.

The same controlled pattern repeats in the admin product form: typing into the price or stock field updates state immediately, and clicking add product or save changes runs validation before calling onSave, which either adds a new product with a generated ID or updates the existing one in the products array.