Chap06 -> Understanding controlled components

QandA/frontend/src/Header.tsx

@@ -1,14 +1,23 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 
 import { UserIcon } from './Icons';
 import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
 
 export const Header = () => {
+  const [searchParams] = useSearchParams();
+  const criteria = searchParams.get('criteria') || '';
+  const [search, setSearch] = React.useState(criteria);
+
   const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    console.log(e.currentTarget.value);
+    setSearch(e.currentTarget.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log(search);
   };
 
   return (
@@ -38,9 +47,11 @@ export const Header = () => {
       >
         Q & A
       </Link>
+      <form onSubmit={handleSubmit}>
         <input
           type="text"
           placeholder="Search ..."
+          value={search}
           onChange={handleSearchInputChange}
           css={css`
             box-sizing: border-box;
@@ -58,6 +69,7 @@ export const Header = () => {
             }
           `}
         />
+      </form>
       <Link
         to="signin"
         css={css`