Fix the key warning

empower-ai · Oct 7, 2023 · f8e9db4 · f8e9db4
1 parent 144b476
commit f8e9db4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/frontend/src/components/main-dashboard/MainDashboard.tsx b/frontend/src/components/main-dashboard/MainDashboard.tsx
@@ -215,7 +215,7 @@ export default function MainDashboard() {
               onClick={() => {
                 setReportingType(ReportingType.WATERFALL);
               }}
-              key="segments-by-dimensions"
+              key="waterfall-chart"
             />
           );
         }
@@ -476,9 +476,13 @@ export default function MainDashboard() {
                   flexDirection="col"
                 >
                   {filters.length > 0 ? (
-                    <Text>
+                    <div>
                       {filters.map((filter, idx) => (
-                        <Text>
+                        <Text
+                          key={`${filter.column}-${
+                            filter.operator
+                          }-${filter.values?.join("")}`}
+                        >
                           {idx > 0 ? <Bold>AND </Bold> : null}
                           {filter.column}{" "}
                           <Bold>
@@ -495,7 +499,7 @@ export default function MainDashboard() {
                           )}
                         </Text>
                       ))}
-                    </Text>
+                    </div>
                   ) : (
                     <Text>None</Text>
                   )}

diff --git a/frontend/src/components/main-dashboard/waterfall/WaterfallChart.tsx b/frontend/src/components/main-dashboard/waterfall/WaterfallChart.tsx
@@ -54,7 +54,14 @@ const CustomizedGroupTick = (props: any) => {
   return (
     <g transform={`translate(${x},${y})`}>
       {rows.map((row, idx) => (
-        <text x={0} y={0} dy={18 * (idx + 1)} textAnchor="middle" fill="#666">
+        <text
+          x={0}
+          y={0}
+          dy={18 * (idx + 1)}
+          textAnchor="middle"
+          fill="#666"
+          key={row}
+        >
           {idx > 4 ? "..." : row}
         </text>
       ))}
@@ -92,14 +99,14 @@ const CustomTooltip = ({ active, payload, label }: any) => {
               const result = [
                 <span
                   className="text-black border-2 bg-gray-100 p-1"
-                  key={`${label}-${component}`}
+                  key={`${label}-${component}-value`}
                 >
                   {component}
                 </span>,
               ];
 
               if (idx < (label as string).split(" AND ").length - 1) {
-                result.push(<span>AND</span>);
+                result.push(<span key={`${label}-${component}-and`}>AND</span>);
               }
               return result;
             })}
@@ -213,6 +220,7 @@ export default function WaterfallChart({ waterfallRows, totalImpact }: Props) {
               ]}
               stroke="gray"
               strokeDasharray="2 2"
+              key={data[idx].name}
             />
           );
         })}