Submitting forms
Submitting the form is the final part of the form's implementation. We are going to implement form submission logic in all three of our forms, starting with the search form.
Submission logic is logic that performs a task with the data from the form. Often, this task will involve posting the data to a web API to perform a server-side task, such as saving the data to a database table. In this section, our submission logic will simply call functions that will simulate web API calls.
Implementing form submission in the search form
In Header.tsx
, carry out the following steps to implement form submission on the search form:
- Import the
useNavigate
hook from React Router:import { Link, useSearchParams, useNavigate, } from 'react-router-dom';
- Inside the
Header
component, on the first line, assign a function to the result of theuseNavigate
hook:const navigate = useNavigate();
- Destructure a
handleSubmit...