From 07d324a3fa5f63e56254fd8b420825ee8725ee95 Mon Sep 17 00:00:00 2001
From: Felix Linker <linkerfelix@gmail.com>
Date: Sun, 10 Jan 2021 22:02:00 +0100
Subject: [PATCH] Add key to property header in ModificationsMenu

---
 src/app/components/ModificationsMenu.jsx | 33 ++++++++++--------------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/app/components/ModificationsMenu.jsx b/src/app/components/ModificationsMenu.jsx
index 582857e3..c009d9b7 100644
--- a/src/app/components/ModificationsMenu.jsx
+++ b/src/app/components/ModificationsMenu.jsx
@@ -146,6 +146,7 @@ export default class ModificationsMenu extends TranslatedComponent {
    * Create a modification component
    */
   _mkModification(property, highlight) {
+    const { translate } = this.context.language;
     const { m, propsToShow, onPropToggle } = this.props;
 
     let onSet = m.set.bind(m);
@@ -156,9 +157,16 @@ export default class ModificationsMenu extends TranslatedComponent {
       onSet = mapped.setter.bind(undefined, m);
     }
 
-    return <Modification key={property} m={m} property={property}
-      onSet={onSet} highlight={highlight} showProp={propsToShow[property]}
-      onPropToggle={onPropToggle} />;
+    return [
+      <tr key={`th-${property}`}>
+        <th colSpan="4">
+          <span className="cb">{translate(property)}</span>
+        </th>
+      </tr>,
+      <Modification key={property} m={m} property={property}
+        onSet={onSet} highlight={highlight} showProp={propsToShow[property]}
+        onPropToggle={onPropToggle} />
+    ];
   }
 
   /**
@@ -167,33 +175,18 @@ export default class ModificationsMenu extends TranslatedComponent {
    */
   _renderModifications() {
     const { m } = this.props;
-    const { translate } = this.context.language;
 
     const blueprintFeatures = getBlueprintInfo(m.getBlueprint()).features[
       m.getBlueprintGrade()
     ];
     const blueprintModifications = chain(keys(blueprintFeatures))
-      .map((feature) => [
-        <tr>
-          <th colSpan="4">
-            <span className="cb">{translate(feature)}</span>
-          </th>
-        </tr>,
-        this._mkModification(feature, true),
-      ])
+      .map((feature) => this._mkModification(feature, true))
       .filter(([_, mod]) => Boolean(mod))
       .flatMap()
       .value();
     const moduleModifications = chain(keys(getModuleInfo(m.getItem()).props))
       .filter((prop) => !blueprintFeatures[prop])
-      .map((prop) => [
-        <tr>
-          <th colSpan="4">
-            <span className="cb">{translate(prop)}</span>
-          </th>
-        </tr>,
-        this._mkModification(prop, false),
-      ])
+      .map((prop) => this._mkModification(prop, false))
       .flatMap()
       .value();