fix search field behavior

frontend/src/components/basics/SearchField.tsx

@@ -1,8 +1,9 @@
+import { useState } from "react";
+
 /**
  * Custom search field component including a clear search functionality
  */
 type SearchFieldProps = { 
-    searchString : string
     onSearchStringChanged: (searchString : string) => void
 }
 
@@ -10,10 +11,13 @@ type SearchFieldProps = {
  * @param SearchFieldProps consisting of an initial searchString and an onSearchStringChanged handler
  * @returns Custom search field component
  */
-export default function SearchField({searchString, onSearchStringChanged} : SearchFieldProps){
-    const setSearchString = (newSearchString : string) => {
-        searchString = newSearchString;
-        onSearchStringChanged(searchString)
+export default function SearchField({onSearchStringChanged} : SearchFieldProps){
+    const [currentSearchString, setCurrentSearchString] = useState<string>("")
+    
+    const changeSearchString = (newSearchString : string) => {
+        console.log(newSearchString);
+        setCurrentSearchString(newSearchString);
+        onSearchStringChanged(newSearchString)
     }
 
     return (
@@ -26,15 +30,15 @@ export default function SearchField({searchString, onSearchStringChanged} : Sear
             className="input-field pl-10 pr-10"
             type="text"
             placeholder="Search"
-            value={searchString}
-            onChange={ e => setSearchString(e.target.value) }
+            value={currentSearchString}
+            onChange={ e => changeSearchString(e.target.value) }
         />
         {/* Right icon: X 
             Clears search string on click
           */}
         <button 
             className="absolute right-0 inset-y-0 flex items-center"
-            onClick = { () => setSearchString("") }
+            onClick = { () => changeSearchString("") }
         >
             <svg
             xmlns="http://www.w3.org/2000/svg"