Merge pull request #672 from weaveworks/react-key-warning

Fix react key warning
weaveworks · Nov 16, 2015 · 8980f6c · 8980f6c
2 parents c8c1996 + ee51247
commit 8980f6c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/client/app/scripts/components/node-details-controls.js b/client/app/scripts/components/node-details-controls.js
@@ -14,11 +14,13 @@ const NodeDetailsControls = React.createClass({
 
     return (
       <div className="node-details-controls">
-        {this.props.controls && this.props.controls.map(control => {
-          return (
-            <NodeControlButton control={control} pending={this.props.pending} />
-          );
-        })}
+        <span className="node-details-controls-buttons">
+          {this.props.controls && this.props.controls.map(control => {
+            return (
+              <NodeControlButton control={control} pending={this.props.pending} key={control.id} />
+            );
+          })}
+        </span>
         {this.props.controls && <span title="Applying..." className={spinnerClassName}></span>}
         {this.props.error && <div className="node-details-controls-error" title={this.props.error}>
           <span className="node-details-controls-error-icon fa fa-warning" />

diff --git a/client/app/scripts/components/node-details-table.js b/client/app/scripts/components/node-details-table.js
@@ -12,7 +12,7 @@ const NodeDetailsTable = React.createClass({
 
         {this.props.rows.map(function(row) {
           return (
-            <div className="node-details-table-row" key={row.key + row.value_major}>
+            <div className="node-details-table-row" key={row.key + row.value_major + row.value_minor}>
               <div className="node-details-table-row-key truncate" title={row.key}>{row.key}</div>
               { row.value_type === 'numeric' && <div className="node-details-table-row-value-scalar">{row.value_major}</div> }
               { row.value_type === 'numeric' && <div className="node-details-table-row-value-unit">{row.value_minor}</div> }

diff --git a/client/app/scripts/components/sparkline.js b/client/app/scripts/components/sparkline.js
@@ -1,5 +1,6 @@
 // Forked from: https://github.com/KyleAMathews/react-sparkline at commit a9d7c5203d8f240938b9f2288287aaf0478df013
 const React = require('react');
+const ReactDOM = require('react-dom');
 const d3 = require('d3');
 
 const Sparkline = React.createClass({
@@ -21,7 +22,7 @@ const Sparkline = React.createClass({
 
   renderSparkline: function() {
     // If the sparkline has already been rendered, remove it.
-    const el = this.getDOMNode();
+    const el = ReactDOM.findDOMNode(this);
     while (el.firstChild) {
       el.removeChild(el.firstChild);
     }
@@ -89,9 +90,9 @@ const Sparkline = React.createClass({
       title = data.length + ' samples, min: ' + d3.round(d3.min(data), 2) + ', max: ' + d3.round(d3.max(data), 2) + ', mean: ' + d3.round(d3.mean(data), 2);
     }
 
-    d3.select(this.getDOMNode()).attr('title', title);
+    d3.select(ReactDOM.findDOMNode(this)).attr('title', title);
 
-    const svg = d3.select(this.getDOMNode()).
+    const svg = d3.select(ReactDOM.findDOMNode(this)).
       append('svg').
       attr('width', this.props.width).
       attr('height', this.props.height).

diff --git a/client/app/scripts/components/topology-options.js b/client/app/scripts/components/topology-options.js
@@ -7,10 +7,15 @@ const TopologyOptions = React.createClass({
 
   renderAction: function(action, option, topologyId) {
     return (
-      <TopologyOptionAction option={option} value={action} topologyId={topologyId} />
+      <TopologyOptionAction option={option} value={action} topologyId={topologyId} key={action} />
     );
   },
 
+  /**
+   * transforms a list of options into one sidebar-item.
+   * The sidebar text comes from the active option. the actions come from the
+   * remaining items.
+   */
   renderOption: function(items) {
     let activeText;
     let activeValue;
@@ -41,7 +46,7 @@ const TopologyOptions = React.createClass({
     }, this);
 
     return (
-      <div className="sidebar-item">
+      <div className="sidebar-item" key={option}>
         {activeText}
         <span className="sidebar-item-actions">
           {actions}