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.

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:

   import {
     Link,
     useSearchParams,
   } from 'react-router-dom';

2. The default value for the search box is going to be the criteria route query parameter. So, let's use the useSearchParams hook from React Router to get this:

   export const Header = () => {
     const [searchParams] = useSearchParams();
     const criteria = searchParams.get('criteria') || '';
     const handleSearchInputChange = ...
   }

3. Let&apos...