fixing an error that occurred when two markers with the same key were placed on the map

src/app/components/MapMarker.js

@@ -4,10 +4,10 @@ import MapView from "react-native-maps";
 
 const markerSize = 30;
 
-export default function MapMarker({ ID, title, image, coordinate, ...props }) {
-  console.log(ID);
+export default function MapMarker({ title, image, coordinate, ...props }) {
+  // console.log({ title, image, coordinate, ...props });
   return (
-    <MapView.Marker key={ID} coordinate={coordinate} title={title} {...props}>
+    <MapView.Marker coordinate={coordinate} title={title} {...props}>
       <View>
         <Image style={styles.markerPoint} source={image} resizeMode="stretch" />
       </View>

src/app/hooks/selectFromDB.js

@@ -114,11 +114,15 @@ function genericSelect(dispatch, query, parseFunction) {
   }, []);
 }
 
-const initialState = { markers: [] };
+const initialState = { markers: new Set() };
 
 function reducer(state = initialState, action) {
+  action.increment.map((val) => {
+    state.markers.add(val);
+  });
+
   return {
-    markers: [...state.markers, ...action.increment],
+    markers: state.markers,
   };
 }
 

src/app/screens/MapFeedScreen.js

@@ -16,8 +16,6 @@ function MapFeedScreen(props) {
 
   const markers = useMarkers();
 
-  console.log(markers.markers);
-
   return (
     <View style={styles.container}>
       <MapView
@@ -35,8 +33,8 @@ function MapFeedScreen(props) {
           longitudeDelta: 0.0421,
         }}
       >
-        {markers.markers.map((val) => {
-          return <MapMarker {...val} />;
+        {[...markers.markers].map(({ ID, ...val }) => {
+          return <MapMarker key={ID.toString()} {...val} />;
         })}
       </MapView>
     </View>