From d72ed50173d549b497a4bb9d1c8cf137d0f64875 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 30 Mar 2022 22:55:50 +1100
Subject: [PATCH] Chap06 -> Reducing boilerplat code with React Hook Form ->
 Refactoring the Header component to use React Hook Form

---
 QandA/frontend/src/Header.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/QandA/frontend/src/Header.tsx b/QandA/frontend/src/Header.tsx
index e15af90..41bfab4 100644
--- a/QandA/frontend/src/Header.tsx
+++ b/QandA/frontend/src/Header.tsx
@@ -2,22 +2,22 @@
 import { css } from '@emotion/react';
 import React from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
 
 import { UserIcon } from './Icons';
 import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
 
+type FormData = {
+  search: string;
+};
+
 export const Header = () => {
+  const { register } = useForm<FormData>();
   const [searchParams] = useSearchParams();
   const criteria = searchParams.get('criteria') || '';
-  const [search, setSearch] = React.useState(criteria);
-
-  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.currentTarget.value);
-  };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log(search);
   };
 
   return (
@@ -49,10 +49,11 @@ export const Header = () => {
       </Link>
       <form onSubmit={handleSubmit}>
         <input
+          {...register('search')}
+          name="search"
           type="text"
           placeholder="Search ..."
-          value={search}
-          onChange={handleSearchInputChange}
+          defaultValue={criteria}
           css={css`
             box-sizing: border-box;
             font-family: ${fontFamily};