fix missing keys

mui · Mar 28, 2024 · 91e0d49 · 91e0d49
1 parent 077dfac
commit 91e0d49
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/x-charts/src/internals/components/ChartsAxesGradients/ChartsAxesGradients.tsx b/packages/x-charts/src/internals/components/ChartsAxesGradients/ChartsAxesGradients.tsx
@@ -31,6 +31,7 @@ export function ChartsAxesGradients() {
           if (colorMap?.type === 'piecewise') {
             return (
               <ChartsPiecewiseGradient
+                key={gradientId}
                 isReveresed={!reverse}
                 scale={scale}
                 colorMap={colorMap}
@@ -43,6 +44,7 @@ export function ChartsAxesGradients() {
           if (colorMap?.type === 'continuous') {
             return (
               <ChartsContinuousGradient
+                key={gradientId}
                 isReveresed={!reverse}
                 scale={scale}
                 colorScale={colorScale!}
@@ -63,6 +65,7 @@ export function ChartsAxesGradients() {
           if (colorMap?.type === 'piecewise') {
             return (
               <ChartsPiecewiseGradient
+                key={gradientId}
                 isReveresed={reverse}
                 scale={scale}
                 colorMap={colorMap}
@@ -75,6 +78,7 @@ export function ChartsAxesGradients() {
           if (colorMap?.type === 'continuous') {
             return (
               <ChartsContinuousGradient
+                key={gradientId}
                 isReveresed={reverse}
                 scale={scale}
                 colorScale={colorScale!}

diff --git a/packages/x-charts/src/internals/components/ChartsAxesGradients/ChartsContinuousGradient.tsx b/packages/x-charts/src/internals/components/ChartsAxesGradients/ChartsContinuousGradient.tsx
@@ -35,7 +35,6 @@ export default function ChartsContinuousGradient(props: ChartsContinuousGradient
   const keyPrefix = `${extremValues[0]}-${extremValues[1]}-`;
   return (
     <linearGradient
-      key={gradientId}
       id={gradientId}
       x1="0"
       x2="0"

diff --git a/packages/x-charts/src/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.tsx b/packages/x-charts/src/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.tsx
@@ -15,7 +15,6 @@ export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientPr
 
   return (
     <linearGradient
-      key={gradientId}
       id={gradientId}
       x1="0"
       x2="0"
@@ -33,7 +32,7 @@ export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientPr
         const offset = isReveresed ? 1 - x / size : x / size;
 
         return (
-          <React.Fragment>
+          <React.Fragment key={threshold.toString() + index}>
             <stop offset={offset} stopColor={colorMap.colors[index]} stopOpacity={1} />
             <stop offset={offset} stopColor={colorMap.colors[index + 1]} stopOpacity={1} />
           </React.Fragment>