Using controlled fields

In this section, we will build the first version of our contact form. It will contain fields for the user’s name, email address, contact reason, and any additional notes the user may want to make.

This method will involve the use of controlled fields, which is where field values are stored in the state. We will use this approach to implement the form – however, in doing so, we will pay attention to the amount of code required and the negative impact on performance; this will help you see why other methods are better.

To get started, first, we need to create a React and TypeScript project, as in previous chapters.

Creating the project

We will develop the form using Visual Studio Code and a new Create React App based project setup. We’ve previously covered this several times, so we will not cover the steps in this chapter – instead, refer to Chapter 3, Setting Up React and TypeScript. Create the project for the contact form...