Forms are extremely common in the apps we build. In this chapter, we'll learn how to build forms using controlled components in React and TypeScript. We'll build a Contact Us form for the React shop we have been working on in other chapters as our learning exercise.

We'll quickly discover that there is a fair amount of boilerplate code involved in creating forms, so we'll look at building a generic form component to reduce the boilerplate code. Client-side validation is critical to the user experience of the forms we build, so we'll also cover this topic in a fair amount of depth.

Finally, form submission is a critical consideration. We'll cover how to handle submission errors, as well as success.

In this chapter, we'll discuss the following topics:

• Creating a form with controlled components
• Reducing boilerplate code with generic components
• Validating forms
• Form submission