Allow changing input

hoto · May 16, 2024 · 1d551b0 · 1d551b0
1 parent 6b7f415
commit 1d551b0
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/components/ParamField.tsx b/components/ParamField.tsx
@@ -1,17 +1,20 @@
 import { FC } from "react";
+import { useRouter } from "next/router";
 
 const ParamField: FC<{
   inputKey: string;
   inputValue: string;
 }> = ({ inputKey, inputValue }) => {
+  const router = useRouter();
+
   return (
     <>
       <div className="col-span-1">
         <input
           type="text"
           className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
           placeholder="Field name"
-          value={inputKey}
+          defaultValue={inputKey}
           disabled={true}
         />
       </div>
@@ -20,8 +23,16 @@ const ParamField: FC<{
           type="text"
           className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
           placeholder="Field value"
-          value={inputValue}
+          defaultValue={inputValue}
           required
+          onChange={(event) => {
+            router.push({
+              query: {
+                ...router.query,
+                [inputKey]: event.target.value,
+              },
+            });
+          }}
         />
       </div>
     </>