fix: missing key for PointLegend

jst-seminar-rostlab-tum · Dec 21, 2024 · 74729a3 · 74729a3
1 parent b626102
commit 74729a3
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 5 deletions.
diff --git a/src/components/Legend/PointLegend.tsx b/src/components/Legend/PointLegend.tsx
@@ -1,5 +1,3 @@
-import { v4 as uuid } from 'uuid';
-
 import { PointLegendProps } from '@/domain/props/PointLegendProps';
 
 export default function PointLegend({ records, children }: PointLegendProps) {
@@ -10,7 +8,7 @@ export default function PointLegend({ records, children }: PointLegendProps) {
           children ? (
             children({ record })
           ) : (
-            <div key={uuid()} className="flex items-center space-x-2">
+            <div key={record.label} className="flex items-center space-x-2">
               <span
                 className="w-3 h-3 rounded-full"
                 style={{ backgroundColor: `hsl(var(--nextui-${record.color}))` }}

diff --git a/src/components/Map/Alerts/CountryAlerts/CountryAlertLegendItem.tsx b/src/components/Map/Alerts/CountryAlerts/CountryAlertLegendItem.tsx
@@ -4,7 +4,7 @@ import PointLegendRecord from '@/domain/props/PointLegendRecord';
 
 export function CountryAlertLegendItem({ record }: { record: PointLegendRecord }) {
   return (
-    <div className="flex gap-3 items-baseline">
+    <div className="flex gap-3 items-baseline" key={record.label}>
       <div>
         <div className={`w-3 h-3 bg-${countryAlertsColors[record.label as CountryAlertType]} rounded-full relative`}>
           <div

diff --git a/src/domain/constant/legend/mapLegendData.tsx b/src/domain/constant/legend/mapLegendData.tsx
@@ -85,7 +85,7 @@ export function mapLegendData(
       break;
     case AlertType.COUNTRY_ALERTS:
       legendData.push({
-        title: 'Country alerts',
+        title: 'Country Alerts',
         popoverInfo: (
           <div>
             <p>Alerts on a country level.</p>