ASP.NET Core 3 and React

Handling an input change event

In this section, we are going to handle the change event on the input element and interact with the event parameter in the event listener. Follow these steps to do so:

1. Open Header.tsx and add a change event listener to the input element in the JSX:

<input   type="text"   placeholder="Search..."   onChange={handleSearchInputChange}   css={ ... }/>

2. Let's change the Header component so that it has an explicit return statement and implement the handleSearchInputChange function just above it:

export const Header = () => {  const handleSearchInputChange = (e: ChangeEvent<HTMLInputElement>)   => {    console.log(e.currentTarget.value);  };  return ( ... );};

Notice the type of annotation for the event parameter. This ensures ...