application can now handle arrays for both text and link inputs from state. updates were to componentBuilder in DemoRender.tsx.

co-authored-by: Crys Lim [email protected]

Author: chrisjtang

app/src/components/main/DemoRender.tsx

@@ -28,20 +28,33 @@ const DemoRender = (props): JSX.Element => {
         const elementType = element.name;
         const childId = element.childId;
         const elementStyle = element.style;
-        const innerText = element.attributes.compText; //typeof innertext is an obj if using arr or obj from state
+        const innerText = element.attributes.compText; 
         const classRender = element.attributes.cssClasses;
-        const activeLink = element.attributes.compLink; //typeof activelink is an obj if using arr or obj from state
+        const activeLink = element.attributes.compLink; 
         let renderedChildren;
         if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
           renderedChildren = componentBuilder(element.children);
         }
-        // check if array was used -> write a forEach / for
-        if (Array.isArray(innerText)) {
-          innerText.forEach(el => {
+
+        // check if innerText or activeLink is an array
+        const innerTextIsArray = Array.isArray(innerText);
+        const activeLinkIsArray = Array.isArray(activeLink);
+        
+        if (innerTextIsArray || activeLinkIsArray) {
+          // determine how many elements to iterate over
+          let n;
+          if (innerTextIsArray && activeLinkIsArray) {
+            n = Math.min(innerText.length, activeLink.length);
+          } else {
+            n = innerTextIsArray ? innerText.length : activeLink.length;
+          }
+          // make a new element for each value of the array
+          for (let i = 0; i < n; i++) {
             const elementCopy = JSON.parse(JSON.stringify(element));
-            elementCopy.attributes.compText = el;
+            elementCopy.attributes.compText = innerTextIsArray ? innerText[i] : innerText;
+            elementCopy.attributes.compLink = activeLinkIsArray ? activeLink[i] : activeLink;
             componentsToRender.push(componentBuilder([elementCopy], key++));
-          });
+          }
           continue;
         }