fix: children with the same key warning

Bridge and Hook components were being created with the same key as children of the same parent
bfanger · Dec 9, 2022 · 4ace1b6 · 4ace1b6
1 parent fae87ed
commit 4ace1b6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/bfanger/svelte-preprocess-react.git"
   },
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "MIT",
   "type": "module",
   "scripts": {

diff --git a/src/lib/internal/Bridge.ts b/src/lib/internal/Bridge.ts
@@ -23,7 +23,7 @@ const Bridge: React.FC<BridgeProps> = ({ createPortal, node }) => {
   }
   const children: React.ReactElement[] = node.nodes.map((subnode) => {
     return React.createElement(Bridge, {
-      key: subnode.key,
+      key: `bridge${subnode.key}`,
       createPortal,
       node: subnode,
     });
@@ -38,7 +38,9 @@ const Bridge: React.FC<BridgeProps> = ({ createPortal, node }) => {
   }
   if (hooks.length >= 0) {
     children.push(
-      ...hooks.map(({ Hook, key }) => React.createElement(Hook, { key }))
+      ...hooks.map(({ Hook, key }) =>
+        React.createElement(Hook, { key: `hook${key}` })
+      )
     );
   }
   return createPortal(