From e164b2a4c3c2700a0633e8b2a9b20b779a48cd65 Mon Sep 17 00:00:00 2001
From: LeoKle <leon.kleinschmidt@outlook.de>
Date: Fri, 28 Jul 2023 15:43:46 +0200
Subject: [PATCH] fix unique key warning

---
 frontend/src/components/Markers.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Markers.tsx b/frontend/src/components/Markers.tsx
index 2f76dda..22eb236 100644
--- a/frontend/src/components/Markers.tsx
+++ b/frontend/src/components/Markers.tsx
@@ -4,6 +4,7 @@ import { Marker, useMap, useMapEvent } from 'react-leaflet';
 import { useEffect, useState } from 'react';
 import { WaypointRecord } from 'interfaces/waypointRecord.interface';
 import location from '../img/location.png';
+import React from 'react';
 
 interface ExtendedWaypointRecord extends WaypointRecord {
     drawn: boolean;
@@ -91,7 +92,7 @@ function Markers({ conditions }: { conditions: WaypointRecord[] }) {
                     const { latitude, longitude } = waypoint;
                     if (condition.drawn) {
                         return (
-                            <>
+                            <React.Fragment key={`drawn-${waypoint.name}`}>
                                 <Marker key={`${waypoint.name}`} position={[latitude, longitude]} icon={MarkerNameWidget(waypoint.name)} eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }} zIndexOffset={condition.zIndex} />
                                 <Marker key={`${waypoint.name}-marker`} position={[latitude, longitude]} icon={MarkerIcon} eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }} zIndexOffset={condition.zIndex} />
                                 <Marker
@@ -101,15 +102,15 @@ function Markers({ conditions }: { conditions: WaypointRecord[] }) {
                                     eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }}
                                     zIndexOffset={condition.zIndex}
                                 />
-                            </>
+                            </React.Fragment>
                         );
                     }
 
                     return (
-                        <>
+                        <React.Fragment key={`not-drawn-${waypoint.name}`}>
                             <Marker key={`${waypoint.name}`} position={[latitude, longitude]} icon={MarkerNameWidget(waypoint.name)} eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }} />;
                             <Marker key={`${waypoint.name}-marker`} position={[latitude, longitude]} icon={MarkerIcon} eventHandlers={{ click: () => handleMarkerClick(waypoint.name) }} />{' '}
-                        </>
+                        </React.Fragment>
                     );
                 })}
         </>