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

Fix react key warning
This commit is contained in:
David
2015-11-16 15:43:55 +01:00
4 changed files with 19 additions and 11 deletions

View File

@@ -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" />

View File

@@ -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> }

View File

@@ -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).

View File

@@ -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}