Building Web Applications with React and ASP.NET Core/

...

/

Understanding Controlled Components

Understanding Controlled Components

Learn to implement forms using controlled components.

We'll cover the following...

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:

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

  1. 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: ...