Understanding controlled components

In React, we can use what is 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 into a controlled component by carrying out the following steps:

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

import { ChangeEvent, FC, useState } from 'react';
import {
  Link,
  RouteComponentProps,
  withRouter,
} from 'react-router-dom';

2. Let's set the props type to RouteComponentProps and destructure the history and location props in the Header component:

export const Header: FC<RouteComponentProps> = ({
  history,
  location,
}) => {
  const handleSearchInputChange = (
    e: ChangeEvent...