From 6ccf9208f09321d8f34cca5206a0002fd971a449 Mon Sep 17 00:00:00 2001
From: Aaron Lindsay <aaron@aclindsay.com>
Date: Sun, 19 Feb 2017 16:42:22 -0500
Subject: [PATCH] Reports: Add keys to everything to make React happy

---
 js/components/ReportsTab.js      | 22 ++++++++++++----------
 js/components/StackedBarChart.js | 16 ++++++++--------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/js/components/ReportsTab.js b/js/components/ReportsTab.js
index 4a99f72..409321b 100644
--- a/js/components/ReportsTab.js
+++ b/js/components/ReportsTab.js
@@ -49,26 +49,28 @@ module.exports = React.createClass({
 					};
 				}();
 				titleTracks.push((
-					<Button bsStyle="link"
-					onClick={navOnClick}>
-					{name}
+					<Button key={i*2} bsStyle="link"
+							onClick={navOnClick}>
+						{name}
 					</Button>
 				));
-				titleTracks.push((<span>/</span>));
+				titleTracks.push((<span key={i*2+1}>/</span>));
 				seriesTraversal.push(this.props.selectedReport.seriesTraversal[i]);
 			}
-			if (titleTracks.length == 0)
+			if (titleTracks.length == 0) {
 				titleTracks.push((
-					<Button bsStyle="link">
-					{this.props.selectedReport.report.Title}
+					<Button key={0} bsStyle="link">
+						{this.props.selectedReport.report.Title}
 					</Button>
 				));
-			else
+			} else {
+				var i = this.props.selectedReport.seriesTraversal.length-1;
 				titleTracks.push((
-					<Button bsStyle="link">
-					{this.props.selectedReport.seriesTraversal[this.props.selectedReport.seriesTraversal.length-1]}
+					<Button key={i*2+2} bsStyle="link">
+					{this.props.selectedReport.seriesTraversal[i]}
 					</Button>
 				));
+			}
 
 			report = (<Panel header={titleTracks}>
 				<StackedBarChart
diff --git a/js/components/StackedBarChart.js b/js/components/StackedBarChart.js
index 6d07c0d..46e9553 100644
--- a/js/components/StackedBarChart.js
+++ b/js/components/StackedBarChart.js
@@ -92,20 +92,20 @@ module.exports = React.createClass({
 			var labelX = x(i) + barStart + barWidth/2;
 			var labelY = height + 15;
 			labels.push((
-				<text x={labelX} y={labelY} transform={"rotate(45 "+labelX+" "+labelY+")"}>{this.props.report.Labels[i]}</text>
+				<text key={"y-axis-label-"+i} x={labelX} y={labelY} transform={"rotate(45 "+labelX+" "+labelY+")"}>{this.props.report.Labels[i]}</text>
 			));
 			labels.push((
-				<line className="axis-tick" x1={labelX} y1={height-3} x2={labelX} y2={height+3} />
+				<line key={"y-axis-tick-"+i} className="axis-tick" x1={labelX} y1={height-3} x2={labelX} y2={height+3} />
 			));
 		}
 
 		// Make X axis marks and labels
 		var makeXLabel = function(value) {
 			labels.push((
-					<line className="axis-tick" x1={-3} y1={height - y(value)} x2={3} y2={height - y(value)} />
+					<line key={"x-axis-tick-"+value} className="axis-tick" x1={-3} y1={height - y(value)} x2={3} y2={height - y(value)} />
 			));
 			labels.push((
-					<text is x={-10} y={height - y(value) + 6} text-anchor={"end"}>{value}</text>
+					<text key={"x-axis-label-"+value} is x={-10} y={height - y(value) + 6} text-anchor={"end"}>{value}</text>
 			));
 		}
 		for (var i=0; i < minMax[1]; i+= xAxisMarksEvery)
@@ -146,7 +146,7 @@ module.exports = React.createClass({
 				}
 
 				seriesBars.push((
-					<g>
+					<g key={"stacked-bar-"+j}>
 						<title>{child}: {value}</title>
 						<rect onClick={rectOnClick} className={rectClasses} x={x(j) + barStart} y={rectY} width={barWidth} height={rectHeight} rx={1} ry={1}/>
 					</g>
@@ -155,7 +155,7 @@ module.exports = React.createClass({
 			if (seriesBars.length > 0) {
 				legendMap[child] = childId;
 				bars.push((
-					<g className="chart-series">
+					<g key={"series-bars-"+childId} className="chart-series">
 						{seriesBars}
 					</g>
 				));
@@ -168,10 +168,10 @@ module.exports = React.createClass({
 			var legendClasses = "chart-color" + (legendMap[series] % 12);
 			var legendY = (legendMap[series] - 1)*15;
 			legend.push((
-				<rect className={legendClasses} x={0} y={legendY} width={10} height={10}/>
+				<rect key={"legend-key-"+legendMap[series]} className={legendClasses} x={0} y={legendY} width={10} height={10}/>
 			));
 			legend.push((
-				<text x={0 + 15} y={legendY + 10}>{series}</text>
+				<text key={"legend-label-"+legendMap[series]} x={0 + 15} y={legendY + 10}>{series}</text>
 			));
 		}