From 1b8918fc56f31517686a6c73f1969787728736ac Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Sun, 24 May 2020 13:12:21 -0400
Subject: [PATCH] Step 3: creating a dynamic search with user input

---
 src/App.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9d79826..b42e1d3 100644
--- 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>