Chap03 -> Handling events -> Handling an input change event

QandA/frontend/src/Header.tsx

@@ -1,13 +1,23 @@
 import React from 'react';
 import { UserIcon } from './Icons';
 
-export const Header = () => (
+export const Header = () => {
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(e.currentTarget.value);
+  };
+
+  return (
     <div>
       <a href="./">Q & A</a>
-    <input type="text" placeholder="Search ..." />
+      <input
+        type="text"
+        placeholder="Search ..."
+        onChange={handleSearchInputChange}
+      />
       <a href="./signin">
         <UserIcon />
         <span>Sign In</span>
       </a>
     </div>
-);
+  );
+};