Fixed issues with keys and improper attribute names causing errors after each action.

Co-authored-by: jonocr <[email protected]>
Co-authored-by: buddhajjigae <[email protected]>
Co-authored-by: xkevinpark <[email protected]>
Co-authored-by: williamdyoon <[email protected]>

Author: 5 people

app/src/components/bottom/BottomTabs.tsx

@@ -40,7 +40,7 @@ const BottomTabs = () => {
     setTheme(e.target.value);
   };
 
-  console.log("Editor Theme: ", theme);
+  // console.log("Editor Theme: ", theme);
 
   return (
     <div className={classes.root} style={style}>

app/src/components/form/Selector.tsx

@@ -6,8 +6,10 @@ import MenuItem from '@material-ui/core/MenuItem';
 
 const FormSelector = (props): JSX.Element => {
   const items = [];
+  let key = 1;
   props.items.forEach(el => {
-    items.push(<MenuItem value={el.value}>{el.text}</MenuItem>);
+    items.push(<MenuItem value={el.value} key={`menu${key}`}>{el.text}</MenuItem>);
+    key++
   })
   return (
     <div className={props.classes.configRow}>

app/src/components/right/ComponentPanel.tsx

@@ -148,10 +148,13 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
                     color={'primary'}
                     variant="outlined"
                     className={isThemeLight ? `${classes.inputField} ${classes.lightThemeFontColor}` : `${classes.inputField} ${classes.darkThemeFontColor}`}
-                    InputProps={{ className: classes.input }}
+                    // Caret inputprops and helpertext must be lowercase
+                    inputprops={{ className: classes.input }}
                     value={compName}
-                    error={errorStatus}
-                    helperText={errorStatus ? errorMsg : ''}
+                    // Doesn't accept boolean value needs to be a string
+                    error={errorStatus.toString()}
+                    // Updated
+                    helpertext={errorStatus ? errorMsg : ''}
                     onChange={handleNameInput}
               />
               </div>

app/src/helperFunctions/renderChildren.tsx

@@ -18,14 +18,15 @@ const renderChildren = (children: ChildElement[]) => {
     if (name === '') child.name = state.components[typeId - 1].name;
     // A DirectChildComponent is an instance of a top level component
     // This component will render IndirectChild components (div/components rendered inside a child component)
-    // Caret Start Removed style from prop drills so that styling isn't applied to canvas items
+    // Caret Start Removed style from prop drills so that styling isn't applied to canvas items. 
+    // Also added keys & removed an unnecessary div around DirChildNestables that were causing errors.
     if (type === 'Component') {
       return (
         <DirectChildComponent
           childId={childId}
           type={type}
           typeId={typeId}
-          key={'DirChildComp' + childId.toString() + name}
+          key={'DirChildComp' + childId.toString() + name + (Math.random()*1000).toString()}
           name={name}
           annotations={annotations}
         />
@@ -39,7 +40,7 @@ const renderChildren = (children: ChildElement[]) => {
           childId={childId}
           type={type}
           typeId={typeId}
-          key={'DirChildHTML' + childId.toString() + name}
+          key={'DirChildHTML' + childId.toString() + name + (Math.random()*1000).toString()}
           name={name}
           annotations={annotations}
         />
@@ -48,17 +49,16 @@ const renderChildren = (children: ChildElement[]) => {
     // Caret Added Orderedlists, Unorderedlists, and Menus, changed lists to nestable because they are nestable.
     // child is a nestable type of HTML element (divs and forms)
     else if (type === 'HTML Element' && (typeId === 11 || typeId === 2 || typeId === 3 || typeId === 14 || typeId === 15 || typeId === 16)) {
-      return (        <div>
+      return (       
         <DirectChildHTMLNestable
           childId={childId}
           type={type}
           typeId={typeId}
           children={children}
-          key={'DirChildHTMLNest' + childId.toString() + name}
+          key={'DirChildHTMLNest' + childId.toString() + name + (Math.random()*1000).toString()}
           name={name}
           annotations={annotations}
         />
-        </div>
       );
     }
     else if (type === 'HTML Element' && typeId === 1000 ) {
@@ -68,7 +68,7 @@ const renderChildren = (children: ChildElement[]) => {
           type={type}
           typeId={typeId}
           children={children}
-          key={'DirChildHTMLNest' + childId.toString() + name}
+          key={'SeparatorChild' + childId.toString() + name + (Math.random()*1000).toString()}
           name={name}
         />
       );
@@ -82,7 +82,7 @@ const renderChildren = (children: ChildElement[]) => {
           type={type}
           typeId={typeId}
           children={children}
-          key={'RouteLink' + childId.toString() + name}
+          key={'RouteLink' + childId.toString() + name + (Math.random()*1000).toString()}
           name={name}
         />
       );