Full Stack Web Development

10.6    Forms

React has two variants with regard how you can handle forms: controlled components and uncontrolled components. Let’s consider their differences:

• With controlled components, the form elements are bound to the state of a React component. A change to the form field automatically entails a change to the state, and vice versa.

• Uncontrolled components are not automatically synchronized. In this case, you access the element and its value and read or set it.

To start our overview of form handling in React, we’ll first implement a contact form using controlled components.

Before we can get to the actual implementation of the form, however, we need a routine that takes care of saving the new data record. Again, you implement this ...