🔨 do not use key as a react prop (#3783)

owid · Jul 10, 2024 · 6d389fc · 6d389fc
1 parent df78d6c
commit 6d389fc
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 10 deletions.
diff --git 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
@@ -10,15 +10,15 @@ const defaultHaloStyle: React.CSSProperties = {
 }
 
 export function Halo(props: {
-    key: React.Key
+    id: React.Key
     children: React.ReactElement
     style?: React.CSSProperties
 }): React.ReactElement {
     const halo = React.cloneElement(props.children, {
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -614,7 +614,7 @@ export class StackedDiscreteBarChart
                         />
                     ))}
                     {this.showTotalValueLabel && (
-                        <Halo key={entityName + "-value-label"}>
+                        <Halo id={entityName + "-value-label"}>
                             <text
                                 id={makeIdForHumanConsumption(
                                     "total",