the-road-to-learn-react · Jan 30, 2025
Showing with 9 additions and 4 deletions.

+9 −4 src/App.jsx
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 const App = () => {
   const stories = [
     {
@@ -32,17 +34,20 @@ const App = () => {
 };
 
 const Search = () => {
+  const [searchTerm, setSearchTerm] = React.useState('');
+
   const handleChange = (event) => {
-    // synthetic event
-    console.log(event);
-    // value of target (here: input HTML element)
-    console.log(event.target.value);
+    setSearchTerm(event.target.value);
   };
 
   return (
     <div>
       <label htmlFor="search">Search: </label>
       <input id="search" type="text" onChange={handleChange} />
+
+      <p>
+        Searching for <strong>{searchTerm}</strong>.
+      </p>
     </div>
   );
 };