From 6d389fc80a62ce8d3da4645c8fb605d6825a1871 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Wed, 10 Jul 2024 10:01:31 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20do=20not=20use=20key=20as=20a=20?=
 =?UTF-8?q?react=20prop=20(#3783)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/barCharts/DiscreteBarChart.tsx         |  2 +-
 packages/@ourworldindata/grapher/src/halo/Halo.tsx     |  4 ++--
 .../grapher/src/noDataModal/NoDataModal.tsx            |  4 ++--
 .../grapher/src/scatterCharts/ComparisonLine.tsx       |  2 +-
 .../src/scatterCharts/ScatterPointsWithLabels.tsx      | 10 ++++++++--
 .../grapher/src/scatterCharts/ScatterSizeLegend.tsx    |  2 +-
 .../src/stackedCharts/StackedDiscreteBarChart.tsx      |  2 +-
 7 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
index 85fadd3898b..7508e1839a2 100644
--- a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -530,7 +530,7 @@ export class DiscreteBarChart
                                 opacity={GRAPHER_AREA_OPACITY_DEFAULT}
                                 style={{ transition: "height 200ms ease" }}
                             />
-                            <Halo key={series.seriesName + "-label"}>
+                            <Halo id={series.seriesName + "-label"}>
                                 <text
                                     x={0}
                                     y={0}
diff --git a/packages/@ourworldindata/grapher/src/halo/Halo.tsx b/packages/@ourworldindata/grapher/src/halo/Halo.tsx
index 5f98385ab42..8c0e4823f12 100644
--- a/packages/@ourworldindata/grapher/src/halo/Halo.tsx
+++ b/packages/@ourworldindata/grapher/src/halo/Halo.tsx
@@ -10,7 +10,7 @@ const defaultHaloStyle: React.CSSProperties = {
 }
 
 export function Halo(props: {
-    key: React.Key
+    id: React.Key
     children: React.ReactElement
     style?: React.CSSProperties
 }): React.ReactElement {
@@ -18,7 +18,7 @@ export function Halo(props: {
         style: { ...defaultHaloStyle, ...props.style },
     })
     return (
-        <React.Fragment key={props.key}>
+        <React.Fragment key={props.id}>
             {halo}
             {props.children}
         </React.Fragment>
diff --git a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
index d41989cbe1b..8502da6e0fe 100644
--- a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
+++ b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
@@ -69,7 +69,7 @@ export class NoDataModal extends React.Component<{
             <g className="no-data">
                 <rect {...bounds.toProps()} fill="#fff" opacity={0.6} />
 
-                <Halo key="no-data-message">
+                <Halo id="no-data-message">
                     <text
                         x={center.x}
                         y={center.y}
@@ -88,7 +88,7 @@ export class NoDataModal extends React.Component<{
                 </Halo>
 
                 {showHelpText && (
-                    <Halo key="no-data-help">
+                    <Halo id="no-data-help">
                         <text
                             x={center.x}
                             y={center.y + padding / 2}
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
index dbecbd17bec..97ece7dd9da 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
@@ -122,7 +122,7 @@ export class ComparisonLine extends React.Component<{
                         }}
                         clipPath={`url(#axisBounds-${renderUid})`}
                     >
-                        <Halo key={`path-${renderUid}`}>
+                        <Halo id={`path-${renderUid}`}>
                             <textPath
                                 baselineShift="-0.2rem"
                                 href={`#path-${renderUid}`}
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
index f3c8672fe9a..e555a49f699 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
@@ -423,7 +423,10 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                     return series.allLabels
                         .filter((label) => !label.isHidden)
                         .map((label) => (
-                            <Halo key={series.displayKey + "-endLabel"}>
+                            <Halo
+                                key={series.displayKey + "-endLabel"}
+                                id={series.displayKey + "-endLabel"}
+                            >
                                 <text
                                     id={makeIdForHumanConsumption(
                                         "scatter-label",
@@ -555,7 +558,10 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
             return series.allLabels
                 .filter((label) => !label.isHidden)
                 .map((label, index) => (
-                    <Halo key={`${series.displayKey}-label-${index}`}>
+                    <Halo
+                        key={`${series.displayKey}-label-${index}`}
+                        id={`${series.displayKey}-label-${index}`}
+                    >
                         <text
                             id={makeIdForHumanConsumption(
                                 "scatter-label",
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
index cb9821fc9a6..7ad0ccf44d4 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
@@ -301,7 +301,7 @@ const LegendItem = ({
                 strokeWidth={circleStrokeWidth}
                 opacity={circleOpacity}
             />
-            <Halo key={label} style={{ ...style, strokeWidth: 3.5 }}>
+            <Halo id={label} style={{ ...style, strokeWidth: 3.5 }}>
                 <text
                     x={cx}
                     y={cy - circleRadius}
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
index 64c1c27d797..a6ab6b2b08c 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -614,7 +614,7 @@ export class StackedDiscreteBarChart
                         />
                     ))}
                     {this.showTotalValueLabel && (
-                        <Halo key={entityName + "-value-label"}>
+                        <Halo id={entityName + "-value-label"}>
                             <text
                                 id={makeIdForHumanConsumption(
                                     "total",