What is a Controlled Input?
A controlled input gets its current value from React state. When the user changes the input, an event handler updates the state.
Why Use Controlled Forms?
- React always knows the current input value.
- Validation can happen while the user types or submits.
- Conditional messages are easy to display.
- Form data can be prepared before sending it to an API.
Basic Form Flow
Store the input value in state, update it with onChange, prevent the default browser submission, validate the data, and finally send it to the backend.
Common Mistake
Do not forget to call event.preventDefault() when handling a normal client-side form submission and you do not want the browser to reload the page.
ADVERTISEMENT