fix one small bug in StatePropsPanel (class to className); fix eventhandler declaration do not show up in code preview for nested elements

Author: wang9hu

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -267,7 +267,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
         </div>
 
         <div style={{display: 'flex', flexDirection: 'column', width: `${40}px`, color: 'black', justifyContent: 'center'}}>
-          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
+          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" className="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
             <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
           </svg>
         </div>

app/src/helperFunctions/generateCode.ts

@@ -392,15 +392,16 @@ const generateUnformattedCode = (
     };
 
     //  ------------------------------------------- added code below  -------------------------------------------
-    const createEventHandler = () => {
+    const createEventHandler = (children) => {
       let importStr = '';
-      enrichedChildren.map((child) => {
+      children.map((child) => {
         if (child.type === 'HTML Element') {
           if (child.events) {
             for (const [event, funcName] of Object.entries(child.events)) {
               importStr += `\tconst ${funcName} = () => {};\n`;
             }
           }
+          if (child.children.length !== 0) importStr += createEventHandler(child.children);
         }
       });
 
@@ -415,7 +416,7 @@ const generateUnformattedCode = (
     // below is the return statement of the codepreview
     generatedCode += `const ${currComponent.name} = (props) => {\n`;
     generatedCode += writeStateProps(currComponent.useStateCodes) ? `\t${writeStateProps(currComponent.useStateCodes)}\n` : '';
-    generatedCode += createEventHandler() ? `${createEventHandler()}\n` : '';
+    generatedCode += createEventHandler(enrichedChildren) ? `${createEventHandler(enrichedChildren)}\n` : '';
     generatedCode += `
   return(
     <>