In this chapter, we discussed controlled components, which are React's recommended method for handling form data entry. With controlled components, we let React control input values via component state.

We looked at building generic Form and Field components containing state and change handlers, so that we don't need to implement individual state and change handlers for every field in every form in our apps.

We then created some standard validation functions, and added the ability to add validation rules within the generic Form component and render validation errors automatically in the Field component.

Finally, we added the ability to handle form submission when consuming the generic Form component. Our Contact Us page was changed to use the generic Form and Field components.

Our generic components only deal with very simple forms. Not surprisingly, there are a fair number of well-established form libraries already out in the wild. A popular choice is Formik, which is similar in some ways to what we have just built but much more powerful.

If you are building an app that contains lots of forms, it is well worth either building a generic form as we have just done or using an established library such as Formik to speed up the development process.