Class 37: Dynamic Forms - mwilkin-401-advanced-javascript/bend-javascript-401d2 GitHub Wiki
Forms are a relatively basic but extremely important part of any modern application. It is one of the foundational ways that a user interacts with the application. They are utilized to gather information, search for something, purchase items, login, etc. , and can have a major impact on the user experience with massive financial ramifications. Therefore, it is important to ensure best design practices are utilized when constructing forms and validating the information, of which there are many.
Three of the main points to consider while making forms are:
- Reduce cognitive load
- Help prevent errors
- Make the experience human
Thankfully, React makes it painless to create interactive UI with the help of component-based approach. For example,
(image sourced from https://medium.com/curofy-engineering/dynamic-forms-with-react-js-d25d7c4f53d1)
This example is of an input field. It is a stateless component, but state can be easily incorporated to further customize the form.
Controlled Components: Importantly, form data is usually handled by a component, rather than the DOM, and each input element of the form has a component of its own and state is controlled in a separate container component. This design give good control over all the form elements and the form data. Callback functions are used to handle the form events.
Uncontrolled Components: Essentially, input form data is stored inside the DOM rather than a component and extracting data requires querying the DOM and, importanty, each form element usually maintains its own state.
Utilizing a component approach when building forms is an efficient way to ensure that the form is reusable while maintain control over its action and customization.