From 91a7e398bd328f7b427e52b8b06a68fd292dbaf7 Mon Sep 17 00:00:00 2001
From: Eric <ericjlaursen@gmail.com>
Date: Mon, 27 Nov 2023 03:15:10 -0500
Subject: [PATCH] Chore: Remove a few instances of "no array index key" eslint
 comment (#3997)

## Description
- [x] use values in keys in-place-of indexes in `polar/Pie` and
`cartesian/Bar` components

## Related Issue
[3273](https://github.com/recharts/recharts/issues/3273)

## Motivation and Context
- contribute to the repo

## How Has This Been Tested?
- [x] all existing unit tests pass (_no new `duplicate key` errors are
present as a result_)

## Types of changes
- [x] Technical Cleanup

## Checklist:
- [x] My code follows the code style of this project.
- [x] All new and existing tests passed.
---
 src/cartesian/Bar.tsx | 6 +++---
 src/polar/Pie.tsx     | 5 ++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/cartesian/Bar.tsx b/src/cartesian/Bar.tsx
index 2f5911e0d0..0413092e3d 100644
--- a/src/cartesian/Bar.tsx
+++ b/src/cartesian/Bar.tsx
@@ -308,7 +308,7 @@ export class Bar extends PureComponent<Props, State> {
           <Layer
             className="recharts-bar-rectangle"
             {...adaptEventsOfChild(this.props, entry, i)}
-            key={`rectangle-${i}`} // eslint-disable-line react/no-array-index-key
+            key={`rectangle-${entry?.x}-${entry?.y}-${entry?.value}`}
           >
             <BarRectangle {...props} />
           </Layer>
@@ -450,9 +450,9 @@ export class Bar extends PureComponent<Props, State> {
 
     return (
       <Layer {...errorBarProps}>
-        {errorBarItems.map((item: ReactElement<ErrorBarProps>, i: number) =>
+        {errorBarItems.map((item: ReactElement<ErrorBarProps>) =>
           React.cloneElement(item, {
-            key: `error-bar-${i}`, // eslint-disable-line react/no-array-index-key
+            key: `error-bar-${clipPathId}-${item.props.dataKey}`,
             data,
             xAxis,
             yAxis,
diff --git a/src/polar/Pie.tsx b/src/polar/Pie.tsx
index 6c439bce47..bccab94df8 100644
--- a/src/polar/Pie.tsx
+++ b/src/polar/Pie.tsx
@@ -465,8 +465,7 @@ export class Pie extends PureComponent<Props, State> {
       }
 
       return (
-        // eslint-disable-next-line react/no-array-index-key
-        <Layer key={`label-${i}`}>
+        <Layer key={`label-${entry.startAngle}-${entry.endAngle}`}>
           {labelLine && Pie.renderLabelLineItem(labelLine, lineProps)}
           {Pie.renderLabelItem(label, labelProps, getValueByDataKey(entry, realDataKey))}
         </Layer>
@@ -498,7 +497,7 @@ export class Pie extends PureComponent<Props, State> {
           tabIndex={-1}
           className="recharts-pie-sector"
           {...adaptEventsOfChild(this.props, entry, i)}
-          key={`sector-${i}`} // eslint-disable-line react/no-array-index-key
+          key={`sector-${entry?.startAngle}=${entry?.endAngle}`}
         >
           <Shape option={sectorOptions} isActive={isActive} shapeType="sector" {...sectorProps} />
         </Layer>