Use state instead of getElementById

components/GameAppealCard.tsx

@@ -22,19 +22,16 @@ import { useState } from "react";
 
 export default function (props: GameAppealProps) {
   const [loading, setLoading] = useState(false);
+  const [percentage, setPercentage] = useState(0);
 
   async function performAction(action: "accept" | "deny"): Promise<void> {
     setLoading(true);
-    const statsReduction = parseInt(
-      (document.getElementById("reductPercentage") as HTMLInputElement | null)
-        ?.value ?? "0",
-    );
 
     const actionResponse = await fetch(
       `/api/game-appeals/${props.id}/${action}`,
       {
         body: JSON.stringify({
-          statsReduction: isNaN(statsReduction) ? 0 : statsReduction,
+          statsReduction: isNaN(percentage) ? 0 : percentage,
         }),
         headers: {
           "content-type": "application/json",
@@ -112,13 +109,13 @@ export default function (props: GameAppealProps) {
           </ModalHeader>
           <ModalBody>
             <Input
-              id="reductPercentage"
               onBeforeInput={(e) => {
                 const value = (e.target as EventTarget & { value: string })
                   .value;
 
                 return !value.match(/\D/);
               }}
+              onChange={(e) => setPercentage(parseInt(e.target.value))}
               placeholder="Number between 0 and 100"
             />
           </ModalBody>