Step 3: creating a dynamic search with user input

colbyfayock · May 24, 2020 · 1b8918f · 1b8918f · chuckis · May 24, 2020
1 parent adbf30a
commit 1b8918f
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import Fuse from 'fuse.js';
 
 import characters from './characters.json';
 
 function App() {
+  const [query, updateQuery] = useState('');
+
   const fuse = new Fuse(characters, {
     keys: [
       'name',
@@ -14,8 +16,12 @@ function App() {
     includeScore: true
   });
 
-  const results = fuse.search('bender');
-  const characterResults = results.map(character => character.item);
+  const results = fuse.search(query);
+  const characterResults = query ? results.map(character => character.item) : characters;
+
+  function onSearch({ currentTarget }) {
+    updateQuery(currentTarget.value);
+  }
 
   return (
     <>
@@ -53,7 +59,7 @@ function App() {
         <aside>
           <form className="search">
             <label>Search</label>
-            <input type="text" />
+            <input type="text" value={query} onChange={onSearch} />
           </form>
         </aside>
       </main>