Understanding Controlled Components

In this section, we are going to learn how to use what are called controlled components to implement a form. A controlled component has its value synchronized with the state in React. This will make more sense when we’ve implemented our first controlled component.

Changing our app header to a controlled component

Let’s open our project in Visual Studio Code and change the search box in our app header to a controlled component. Follow these steps:

1. Open Header.tsx and add the following imports: