From f2ce223802c7b83edbe02241c75579b5be9ad104 Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Wed, 13 Mar 2024 17:34:57 +0200
Subject: [PATCH] Fix console errors

---
 package-lock.json                             |  8 ++++----
 package.json                                  |  2 +-
 .../MapMaplibreGlFeaturePropertyPopup.tsx     | 20 ++++++++++---------
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d6968569..25838695 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
         "@maplibre/maplibre-gl-geocoder": "^1.5.0",
-        "@maplibre/maplibre-gl-inspect": "^1.6.0",
+        "@maplibre/maplibre-gl-inspect": "^1.6.1",
         "@maplibre/maplibre-gl-style-spec": "^20.1.0",
         "@mdi/js": "^6.6.96",
         "@mdi/react": "^1.5.0",
@@ -2592,9 +2592,9 @@
       }
     },
     "node_modules/@maplibre/maplibre-gl-inspect": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-inspect/-/maplibre-gl-inspect-1.6.0.tgz",
-      "integrity": "sha512-RKxj/GIHQP7qz4ptuyqsAq7SI57wuougE75Sk1DO7drBKSKuayzjPwZSWzqYFceIEQOGR2kUCECnAjUqTkQtoA==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-inspect/-/maplibre-gl-inspect-1.6.1.tgz",
+      "integrity": "sha512-PDzeNTIAXqsHDiBk8pmwUfTMvk+QRmaNfpC32o9Or6fS/2UwOXlT03dGzILUTJUonOfwiVYcZxgsYCZq9LRcKw==",
       "dependencies": {
         "lodash.isequal": "^4.5.0",
         "randomcolor": "^0.6.2"
diff --git a/package.json b/package.json
index d5390978..8d0324a8 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   "dependencies": {
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@maplibre/maplibre-gl-geocoder": "^1.5.0",
-    "@maplibre/maplibre-gl-inspect": "^1.6.0",
+    "@maplibre/maplibre-gl-inspect": "^1.6.1",
     "@maplibre/maplibre-gl-style-spec": "^20.1.0",
     "@mdi/js": "^6.6.96",
     "@mdi/react": "^1.5.0",
diff --git a/src/components/MapMaplibreGlFeaturePropertyPopup.tsx b/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
index 75c3dcb6..e77d9d07 100644
--- a/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
+++ b/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
@@ -15,25 +15,25 @@ function displayValue(value: string | number | Date | object | undefined) {
   return value;
 }
 
-function renderKeyValueTableRow(key: string, value: string | undefined) {
-  return <tr key={key}>
+function renderKeyValueTableRow(key: string, value: string | undefined, idx: number) {
+  return <tr key={`${key}-${value}-${idx}`}>
     <td className="maputnik-popup-table-cell">{key}</td>
     <td className="maputnik-popup-table-cell">{value}</td>
   </tr>
 }
 
 function renderFeature(feature: InspectFeature, idx: number) {
-  return <>
-    <tr key={`${feature.sourceLayer}-${idx}`}>
+  return <React.Fragment key={idx}>
+    <tr key={`counter-${idx}`}>
       <td colSpan={2} className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</td>
     </tr>
-    {renderKeyValueTableRow("$type", feature.geometry.type)}
-    {renderKeyValueTableRow("Feature ID", displayValue(feature.id))}
+    {renderKeyValueTableRow("$type", feature.geometry.type, idx)}
+    {renderKeyValueTableRow("Feature ID", displayValue(feature.id), idx)}
     {Object.keys(feature.properties).map(propertyName => {
       const property = feature.properties[propertyName];
-      return renderKeyValueTableRow(propertyName, displayValue(property))
+      return renderKeyValueTableRow(propertyName, displayValue(property), idx)
     })}
-  </>
+  </React.Fragment>
 }
 
 function removeDuplicatedFeatures(features: InspectFeature[]) {
@@ -68,7 +68,9 @@ class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
     const features = removeDuplicatedFeatures(this.props.features)
     return <div className="maputnik-feature-property-popup">
       <table className="maputnik-popup-table">
-        {features.map(renderFeature)}
+        <tbody>
+          {features.map(renderFeature)}
+        </tbody>
       </table>
     </div>
   }