From da34ee3a362c04a52ea4c0d1f8e353aec8ab34ab Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 8 Feb 2021 19:35:57 +0200
Subject: Create refMap to avoid errors on direct ref access

---
 src/pages/FormPage.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/pages/FormPage.tsx')

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 50f48ba..7798be6 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -197,10 +197,13 @@ function FormPage(): JSX.Element {
     if (!form) {
         return <Loading/>;
     }
-
+    
+    const refMap: Map<string, React.RefObject<RenderedQuestion>> = new Map();
     const questions = form.questions.map((question, index) => {
+        const questionRef = createRef<RenderedQuestion>();
+        refMap.set(question.id, questionRef);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return <RenderedQuestion ref={createRef<RenderedQuestion>()} focus_ref={createRef<any>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>;
+        return <RenderedQuestion ref={questionRef} focus_ref={createRef<any>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>;
     });
 
     async function handleSubmit(event: SyntheticEvent) {
@@ -213,7 +216,10 @@ function FormPage(): JSX.Element {
                 return;
             }
 
-            prop.ref.current.validateField();
+            const questionRef = refMap.get(question.id);
+            if (questionRef && questionRef.current) {
+                questionRef.current.validateField();
+            }
             // In case when field is invalid, add this to invalid fields list.
             if (prop.props.public_state.get("valid") === false) {
                 invalidFieldIDs.push(i);
-- 
cgit v1.2.3