ASP.NET Core 3 and React

Implementing form submission in the search form

In Header.tsx, carry out the following steps to implement submission on the search form:

1. Import the FormEvent type from React:

import { ChangeEvent, FC, useState, FormEvent } from 'react';

2. Create a submit handler just beneath the handleSearchInputChange function:

const handleSearchSubmit = (e: FormEvent<HTMLFormElement>) => {  e.preventDefault();  history.push(`/search?criteria=${search}`);};

So, this sets the browser location path to search with the appropriate criteria query parameter.

3. Let's wire this handler up to the search form:

<form onSubmit={handleSearchSubmit}>  <input ... /></form>

Our project isn't compiling yet because we need to pass the onSubmit function prop into the Form