refactor(client): refactor fill-in-the-blank input change handler (#64014)

client/src/templates/Challenges/components/fill-in-the-blanks.tsx

@@ -13,7 +13,7 @@ type FillInTheBlankProps = {
   showFeedback: boolean;
   feedback: string | null;
   showWrong: boolean;
-  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleInputChange: (inputIndex: number, value: string) => void;
 };
 
 function FillInTheBlanks({
@@ -70,8 +70,9 @@ function FillInTheBlanks({
                     type='text'
                     maxLength={blankAnswers[value].length + 3}
                     className={getInputClass(value)}
-                    onChange={handleInputChange}
-                    data-index={node.value}
+                    onChange={e =>
+                      handleInputChange(node.value, e.target.value)
+                    }
                     size={blankAnswers[value].length}
                     autoComplete='off'
                     aria-label={t('learn.fill-in-the-blank.blank')}

client/src/templates/Challenges/fill-in-the-blank/show.tsx

@@ -160,11 +160,9 @@ const ShowFillInTheBlank = ({
     }
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const inputIndex = parseInt(e.target.getAttribute('data-index') as string);
-
+  const handleInputChange = (inputIndex: number, value: string): void => {
     const newUserAnswers = [...userAnswers];
-    newUserAnswers[inputIndex] = e.target.value;
+    newUserAnswers[inputIndex] = value;
 
     const newAnswersCorrect = [...answersCorrect];
     newAnswersCorrect[inputIndex] = null;