designed the string outpu for code preview

Author: sean1292

src/components/CodePreview.tsx

@@ -26,7 +26,7 @@ class CodePreview extends Component<Props> {
         }}
       >
         <SyntaxHighlighter style={hybrid}>
-          {format(componentRender(focusComponent, components))}
+          {componentRender(focusComponent, components)}
         </SyntaxHighlighter>
       </div>
     );

src/components/Rectangle.tsx

@@ -149,6 +149,7 @@ class Rectangle extends Component<PropsInt, StateInt> {
           fillPatternImage={this.state.image ? this.state.image : this.setImage(imageSource)}
           fillPatternScaleX={this.state.image ? width / this.state.image.width : 1}
           fillPatternScaleY={this.state.image ? height / this.state.image.height : 1}
+          _useStrictMode
         />
         <Label>
           <Text
@@ -194,16 +195,14 @@ class Rectangle extends Component<PropsInt, StateInt> {
                 }
               />
             ))}
-        {focusChild &&
-          focusChild.childId === childId &&
-          draggable && (
-            <TransformerComponent
-              focusChild={focusChild}
-              rectClass={'childRect'}
-              anchorSize={8}
-              color={'grey'}
-            />
-          )}
+        {focusChild && focusChild.childId === childId && draggable && (
+          <TransformerComponent
+            focusChild={focusChild}
+            rectClass={'childRect'}
+            anchorSize={8}
+            color={'grey'}
+          />
+        )}
       </Group>
     );
   }

src/utils/Interfaces.ts

@@ -30,6 +30,7 @@ export interface ChildrenInt extends Array<ChildInt> {}
 export interface ComponentInt {
   id: number;
   stateful: boolean;
+  classBased: boolean;
   title: string;
   color: string;
   props: PropInt[];

src/utils/componentRender.util.ts

@@ -5,13 +5,17 @@ const componentRender = (component: ComponentInt, components: ComponentsInt) =>
   const {
     childrenArray,
     title,
-    props
+    props,
+    stateful,
+    classBased
   }: {
     childrenArray: ChildrenInt;
     title: string;
     props: PropInt[];
+    stateful: boolean;
+    classBased: boolean;
   } = component;
-
+  let stateful1 = true;
   function typeSwitcher(type: string) {
     switch (type) {
       case 'string':
@@ -112,7 +116,10 @@ const componentRender = (component: ComponentInt, components: ComponentsInt) =>
   }
 
   return `
-    import React from 'react';
+    ${classBased ? `import React, {Component, useState} from 'react';` : ``}
+    ${stateful && !classBased ? `import React, {useState} from 'react';` : ``}
+    ${!stateful && !classBased ? `import React from 'react';` : ``}
+
     ${childrenArray
       .filter(child => child.childType !== 'HTML')
       .map(child => `import ${child.componentName} from './${child.componentName}.tsx'`)
@@ -129,9 +136,19 @@ const componentRender = (component: ComponentInt, components: ComponentsInt) =>
       ${props.map(prop => `${prop.key}: ${typeSwitcher(prop.type)}\n`)}
     };
 
-    const ${title} = (props: Props) => {
+      ${classBased ? `class ${title} extends Component {` : `const ${title} = (props: Props) => {`}
+      ${stateful ? `const ['PROP', 'setPROP'] = useState("INITIAL VALUE FOR PROP");` : ``}
+      ${
+        true
+          ? `constructor(props) {
+        super(props);
+        this.state = {}
+       }`
+          : ``
+      }
+
       const {${props.map(el => el.key).join(', ')}} = props;
-      
+      ${true ? `render() {` : ``}
       return (
         <div>
         ${cloneDeep(childrenArray)
@@ -144,6 +161,7 @@ const componentRender = (component: ComponentInt, components: ComponentsInt) =>
         </div>
       );
     }
+    ${true ? `}` : ``}
     export default ${title};
   `;
 };