fix(sankey): include link's index in the React Component key when cre…

…ating the SVG element (#2037) * Include link's index in the react's key prop This is to support custom color gradients for multiple links between the same two nodes. Also prevents the duplicate child key error when 2+ links attach to the same two nodes. * Include Sankey link's index in the gradient id Support custom color gradients for multiple links between the same two nodes.
plouc · Jun 17, 2022 · 5985ab4 · 5985ab4
1 parent b78c3d1
commit 5985ab4
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/packages/sankey/src/SankeyLinks.tsx b/packages/sankey/src/SankeyLinks.tsx
@@ -59,7 +59,7 @@ export const SankeyLinks = <N extends DefaultNode, L extends DefaultLink>({
         <>
             {links.map(link => (
                 <SankeyLinksItem<N, L>
-                    key={`${link.source.id}.${link.target.id}`}
+                    key={`${link.source.id}.${link.target.id}.${link.index}`}
                     link={link}
                     layout={layout}
                     path={getLinkPath(link, linkContract)}

diff --git a/packages/sankey/src/SankeyLinksItem.tsx b/packages/sankey/src/SankeyLinksItem.tsx
@@ -32,7 +32,7 @@ export const SankeyLinksItem = <N extends DefaultNode, L extends DefaultLink>({
     isInteractive,
     onClick,
 }: SankeyLinksItemProps<N, L>) => {
-    const linkId = `${link.source.id}.${link.target.id}`
+    const linkId = `${link.source.id}.${link.target.id}.${link.index}`
 
     const { animate, config: springConfig } = useMotionConfig()
     const animatedPath = useAnimatedPath(path)