In Header.tsx, carry out the following steps to implement submission on the search form:
- Import the FormEvent type from React:
import { ChangeEvent, FC, useState, FormEvent } from 'react';
- 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.
- 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 component from the ask and answer forms. So, we'll try the search form out later.