Handle React keys

Author: quietbits

package.json

@@ -40,6 +40,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tslib": "^2.7.0",
+    "uuid": "^11.0.5",
     "zustand": "^4.5.5",
     "zustand-querystring": "^0.0.19"
   },

src/components/ScValPrettyJson/index.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import { XdrLargeInt } from "@stellar/stellar-sdk";
 import { parse, stringify } from "lossless-json";
+import { v4 as uuidv4 } from "uuid";
 
 import { SdsLink } from "@/components/SdsLink";
 import { STELLAR_EXPERT } from "@/constants/settings";
@@ -14,8 +15,6 @@ import { AnyObject } from "@/types/types";
 
 import "./styles.scss";
 
-// TODO: unique React key
-
 /* Create contract storage JSON-like structure */
 export const ScValPrettyJson = ({
   xdrString,
@@ -108,14 +107,16 @@ export const ScValPrettyJson = ({
         );
       }
 
-      const renderedItems = item.map((arrayItem: any, arrayIndex: number) =>
-        render({
-          item: arrayItem,
-          parentKey,
-          isKey,
-          renderKey: `${renderKey || "init"}-${parentKey}-${arrayIndex}`,
-        }),
-      );
+      const renderedItems = item.map((arrayItem: any, arrayIndex: number) => (
+        <Fragment key={`${renderKey}-${arrayIndex}`}>
+          {render({
+            item: arrayItem,
+            parentKey,
+            isKey,
+            renderKey: `${renderKey || ""}${parentKey || ""}-${arrayIndex}`,
+          })}
+        </Fragment>
+      ));
 
       if (isKey) {
         return renderedItems;
@@ -173,7 +174,8 @@ export const ScValPrettyJson = ({
               item: eVal,
               parentKey: eKey,
               isKey,
-              renderKey: `${renderKey}-${parentKey}-${eKey}`,
+              // Using UUID to make sure key will be unique
+              renderKey: `${renderKey || parentKey || ""}${eKey}-${uuidv4()}`,
             });
           case "bool":
             return (
@@ -256,30 +258,35 @@ export const ScValPrettyJson = ({
         <Fragment key={renderKey}>
           <Bracket char="{" />
           <div className="ScValPrettyJson__container">
-            {entries.map((e) => {
+            {entries.map((e, eIdx) => {
               const [eKey, eVal] = e;
+              const renKey = `${renderKey}-${parentKey}-${eKey}-${eIdx}`;
 
               switch (eKey) {
                 // Don't render these keys
                 case "contract_instance":
                 case "vec":
                 case "wasm":
                 case "symbol":
-                  return render({
-                    item: eVal,
-                    parentKey: eKey,
-                    isKey,
-                    renderKey: `${renderKey}-${parentKey}-${eKey}`,
-                  });
+                  return (
+                    <Fragment key={renKey}>
+                      {render({
+                        item: eVal,
+                        parentKey: eKey,
+                        isKey,
+                        renderKey: renKey,
+                      })}
+                    </Fragment>
+                  );
                 default:
                   return (
-                    <div className="ScValPrettyJson__row">
+                    <div className="ScValPrettyJson__row" key={renKey}>
                       <div className="ScValPrettyJson__key">{eKey}</div>
                       {render({
                         item: eVal,
                         parentKey: eKey,
                         isKey,
-                        renderKey: `${renderKey}-${parentKey}-${eKey}`,
+                        renderKey: renKey,
                       })}
                     </div>
                   );

yarn.lock

@@ -5975,6 +5975,11 @@ util@^0.12.5:
     is-typed-array "^1.1.3"
     which-typed-array "^1.1.2"
 
+uuid@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-11.0.5.tgz#07b46bdfa6310c92c3fb3953a8720f170427fc62"
+  integrity sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA==
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"