image shows up inside Link, no functionality yet

Author: MikoGome

app/src/components/main/DemoRender.tsx

@@ -70,7 +70,7 @@ const DemoRender = (): JSX.Element => {
   const componentBuilder = (array: object, key: number = 0) => {
     const componentsToRender = [];
     for (const element of array) {
-      
+      console.log('array', array);
       if (element.name !== 'separator') {
         const elementType = element.name;
         const childId = element.childId;
@@ -79,13 +79,13 @@ const DemoRender = (): JSX.Element => {
         const classRender = element.attributes.cssClasses;
         const activeLink = element.attributes.compLink;
         let renderedChildren;
-        if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
+        if (elementType !== 'input' && elementType !== 'img' && elementType !== 'Image' && element.children.length > 0) {
           renderedChildren = componentBuilder(element.children);
         }
         if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
         else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
         else if (elementType === 'Image') componentsToRender.push(<Box component='img' src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
-        else if (elementType === 'a' || elementType === 'Link') componentsToRender.push(<Box component='a' href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);
+        else if (elementType === 'a' || elementType === 'Link') componentsToRender.push(<Box component='a' href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>);
         else if (elementType === 'Switch') componentsToRender.push(<Switch>{renderedChildren}</Switch>);
         else if (elementType === 'Route') componentsToRender.push(<Route exact path={activeLink}>{renderedChildren}</Route>);
         else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>
@@ -98,9 +98,10 @@ const DemoRender = (): JSX.Element => {
 
   let code = '';
   const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
+
   componentBuilder(currComponent.children).forEach(element => {
     try{
-      code += ReactDOMServer.renderToString(element)
+      code += ReactDOMServer.renderToString(element);
     } catch {
       return;
     }
@@ -111,6 +112,7 @@ const DemoRender = (): JSX.Element => {
   }, [])
 
   useEffect(() => {
+    console.log('code', code);
     iframe.current.contentWindow.postMessage(code, '*');
   }, [code])
 

app/src/reducers/componentReducer.ts

@@ -397,6 +397,7 @@ const reducer = (state: State, action: Action) => {
         const canvasFocus = { ...state.canvasFocus, componentId, childId };
         //makes it so the code preview will update when clicking on a new component
         const components = state.components.map(element => {
+          console.log('element', element);
           return Object.assign({}, element);
         });
         return { ...state, components, canvasFocus };