Fix React warning about unique keys

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Explain`. See https://fb.me/react-warning-keys for more information. in div (created by Explain)
clarabstract · May 28, 2017 · 08d50f3 · 08d50f3
1 parent 1a4fba1
commit 08d50f3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git a/explain.jsx b/explain.jsx
@@ -6,8 +6,6 @@ App.Explain = class Explain extends React.Component {
       this.props.onRequestClose();
     }
 
-// Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Explain`. See https://fb.me/react-warning-keys for more information.
-//     in div (created by Explain)
     render() {
         var style = {
           content: {
@@ -63,11 +61,11 @@ App.Explain = class Explain extends React.Component {
             var assemblyLinesExplanation = null;
             if (recipe.type != "fluid") {
                 assemblyLinesExplanation = [
-                  <div className="section"># Assembly Lines</div>,
-                  <div>
+                  <div key="1" className="section"># Assembly Lines</div>,
+                  <div key="2">
                     One lane of your chosen transport belt can transport only { decimalNumber(this.props.options.beltlvl * 60) } {madeUnits}/min. Since one { madeBySingular } produces at a rate of { decimalNumber(60 / recipe.assemblyTime) } {madeUnits}/min, if { wholeNumber(recipe.assemblersPerLine) } or more { madeByPlural } output onto the same belt, then the belt will back up, limiting production.
                   </div>,
-                  <div>
+                  <div key="3">
                     Since you need { wholeNumber(recipe.assemblersRequired) } { madeByPlural }, this means you will need { decimalNumber(recipe.lines) } separate belt lines, which in real life means { wholeNumber(recipe.lines) } belt lines.
                   </div>
                 ];

diff --git a/options.jsx b/options.jsx
@@ -25,25 +25,21 @@ App.Options = class Options extends React.Component {
     this.props.onChangeOptions(this.props.options);
   }
 
-// Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Options`. See https://fb.me/react-warning-keys for more information.
-//     in option (created by Options)
   render() {
-
     if (this.state.showOptions) {
-
       var oldBeltOptions = [
-        <option value="3.8">Basic (slow corners)</option>,
-        <option value="5.7">Basic (straight)</option>,
-        <option value="6.3">Fast (slow corners)</option>,
-        <option value="9.4">Fast (straight)</option>,
-        <option value="8.3">Express (slow corners)</option>,
-        <option value="14.2">Express (straight)</option>
+        <option key="3.8" value="3.8">Basic (slow corners)</option>,
+        <option key="5.7" value="5.7">Basic (straight)</option>,
+        <option key="6.3" value="6.3">Fast (slow corners)</option>,
+        <option key="9.4" value="9.4">Fast (straight)</option>,
+        <option key="8.3" value="8.3">Express (slow corners)</option>,
+        <option key="14.2" value="14.2">Express (straight)</option>
       ];
 
       var newBeltOptions = [
-        <option value="6.66">Basic</option>,
-        <option value="13.33">Fast</option>,
-        <option value="20.00">Express</option>
+        <option key="6.66" value="6.66">Basic</option>,
+        <option key="13.33" value="13.33">Fast</option>,
+        <option key="20.00" value="20.00">Express</option>
       ];
 
       var beltOptions;