Create new objects with spread when modifying vnode children instead of directly setting children when possible.

js/src/admin/components/AdminLinkButton.js

@@ -11,10 +11,6 @@ import LinkButton from '../../common/components/LinkButton';
 
 export default class AdminLinkButton extends LinkButton {
   getButtonContent(children) {
-    const content = super.getButtonContent(children);
+    return [...super.getButtonContent(children), <div className="AdminLinkButton-description">{this.attrs.description}</div>];
-
-    content.push(<div className="AdminLinkButton-description">{this.attrs.description}</div>);
-
-    return content;
   }
 }

js/src/admin/components/AppearancePage.js

@@ -28,18 +28,8 @@ export default class AppearancePage extends Page {
               <div className="helpText">{app.translator.trans('core.admin.appearance.colors_text')}</div>
 
               <div className="AppearancePage-colors-input">
-                <input
+                <input className="FormControl" type="text" placeholder="#aaaaaa" bidi={this.primaryColor} />
-                  className="FormControl"
+                <input className="FormControl" type="text" placeholder="#aaaaaa" bidi={this.secondaryColor} />
-                  type="text"
-                  placeholder="#aaaaaa"
-                  bidi={this.primaryColor}
-                />
-                <input
-                  className="FormControl"
-                  type="text"
-                  placeholder="#aaaaaa"
-                  bidi={this.secondaryColor}
-                />
               </div>
 
               {Switch.component(

js/src/admin/components/PermissionDropdown.js

@@ -40,7 +40,7 @@ export default class PermissionDropdown extends Dropdown {
   }
 
   view(vnode) {
-    vnode.children = [];
+    const children = [];
 
     let groupIds = app.data.permissions[this.attrs.permission] || [];
 
@@ -60,7 +60,7 @@ export default class PermissionDropdown extends Dropdown {
 
     if (this.showing) {
       if (this.attrs.allowGuest) {
-        vnode.children.push(
+        children.push(
           Button.component(
             {
               icon: everyone ? 'fas fa-check' : true,
@@ -72,7 +72,7 @@ export default class PermissionDropdown extends Dropdown {
         );
       }
 
-      vnode.children.push(
+      children.push(
         Button.component(
           {
             icon: members ? 'fas fa-check' : true,
@@ -98,7 +98,7 @@ export default class PermissionDropdown extends Dropdown {
       );
 
       [].push.apply(
-        vnode.children,
+        children,
         app.store
           .all('groups')
           .filter((group) => [Group.ADMINISTRATOR_ID, Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
@@ -118,7 +118,7 @@ export default class PermissionDropdown extends Dropdown {
       );
     }
 
-    return super.view(vnode);
+    return super.view({ ...vnode, children });
   }
 
   save(groupIds) {

js/src/admin/components/SessionDropdown.js

@@ -18,9 +18,7 @@ export default class SessionDropdown extends Dropdown {
   }
 
   view(vnode) {
-    vnode.children = this.items().toArray();
+    return super.view({ ...vnode, children: this.items().toArray() });
-
-    return super.view(vnode);
   }
 
   getButtonContent() {

js/src/admin/components/SettingDropdown.js

@@ -13,19 +13,20 @@ export default class SettingDropdown extends SelectDropdown {
   }
 
   view(vnode) {
-    vnode.children = this.attrs.options.map(({ value, label }) => {
+    return super.view({
-      const active = app.data.settings[this.attrs.key] === value;
+      ...vnode,
+      children: this.attrs.options.map(({ value, label }) => {
+        const active = app.data.settings[this.attrs.key] === value;
 
-      return Button.component(
+        return Button.component(
-        {
+          {
-          icon: active ? 'fas fa-check' : true,
+            icon: active ? 'fas fa-check' : true,
-          onclick: saveSettings.bind(this, { [this.attrs.key]: value }),
+            onclick: saveSettings.bind(this, { [this.attrs.key]: value }),
-          active,
+            active,
-        },
+          },
-        label
+          label
-      );
+        );
+      }),
     });
-
-    return super.view(vnode);
   }
 }

js/src/admin/components/UploadImageButton.js

@@ -9,22 +9,20 @@ export default class UploadImageButton extends Button {
 
     if (app.data.settings[this.attrs.name + '_path']) {
       this.attrs.onclick = this.remove.bind(this);
-      vnode.children = app.translator.trans('core.admin.upload_image.remove_button');
 
       return (
         <div>
           <p>
             <img src={app.forum.attribute(this.attrs.name + 'Url')} alt="" />
           </p>
-          <p>{super.view(vnode)}</p>
+          <p>{super.view({ ...vnode, children: app.translator.trans('core.admin.upload_image.remove_button') })}</p>
         </div>
       );
     } else {
       this.attrs.onclick = this.upload.bind(this);
-      vnode.children = app.translator.trans('core.admin.upload_image.upload_button');
     }
 
-    return super.view(vnode);
+    return super.view({ ...vnode, children: app.translator.trans('core.admin.upload_image.upload_button')});
   }
 
   /**

js/src/forum/components/SessionDropdown.js

@@ -20,9 +20,7 @@ export default class SessionDropdown extends Dropdown {
   }
 
   view(vnode) {
-    vnode.children = this.items().toArray();
+    return super.view({ ...vnode, children: this.items().toArray() });
-
-    return super.view(vnode);
   }
 
   getButtonContent() {

js/src/forum/utils/alertEmailConfirmation.js

@@ -57,9 +57,7 @@ export default function alertEmailConfirmation(app) {
     view(vnode) {
       const vdom = super.view(vnode);
 
-      vdom.children = [<div className="container">{vdom.children}</div>];
+      return { ...vdom, children: [<div className="container">{vdom.children}</div>]};
-
-      return vdom;
     }
   }