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 = () => {
-  <div>
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    <a href="./">Q & A</a>
+    console.log(e.currentTarget.value);
-    <input type="text" placeholder="Search ..." />
+  };
-    <a href="./signin">
+
-      <UserIcon />
+  return (
-      <span>Sign In</span>
+    <div>
-    </a>
+      <a href="./">Q & A</a>
-  </div>
+      <input
-);
+        type="text"
+        placeholder="Search ..."
+        onChange={handleSearchInputChange}
+      />
+      <a href="./signin">
+        <UserIcon />
+        <span>Sign In</span>
+      </a>
+    </div>
+  );
+};