Encountered two children with same key

[alexkalinins]

Hello. First of all, very nice project! After following the demonstrations in the documentation in JavaScript, I decided to try using the library with TypeScript. In my project, it is possible to add nodes with a button. We implement the TS types in our own object (CustomNode and CustomSchema that holds CustomNode instead of Node). We also use a custom renderer to display the nodes.

The our Node.id value is generated with uuid to make sure it is unique. The Port.id value is based on the same uuid, like '<node.id>-output-1'. The function that is triggered when button is pressed to make a new node makes a new node object instance and adds it to schema using addNode() method that we get from useSchema().

When we make a first node with button, nothing bad happens, we can drag it around and it is still fine. When we add a second node, immediately we get this error:

After adding the second node, dragging any node around or trying to link them repeats the same error continuously (complaining about the key of the second node). The links do form though and the function of our program is unaffected, only slows down performance significantly. The order of creation also does not matter; the first one works fine.

I tried adding a uuid key to the outer-most div in our custom renderer, but that does not fix it (the screenshot is without the uuid in div). Thank you for your help.

[andriy-kdp]

@alexkalinins hello, are you solved this problem?

[Belashab]

@andriy-kdp @alexkalinins I don't know if issue is still relevant for you but it looks like I have found a way to fix this.

All you need is to change "NodesCanvas" to "NodesCanvas$1" in lines 7 and 89 in node_modules\beautiful-react-diagrams\esm\Diagram\Diagram.js

[adamsch]

@Belashab Are you sure this fixes it? I just tried and it doesn't seem to work. I'm having the same issue

[danlobo]

For some reason, addNode internal dispatch is called twice, so the schema ends with two identical nodes.

[serhii-baraniuk]

Have the same issue by using NextJs

[logemann]

addNode is definitely broken since dispatching seems wrong. Added 3 nodes got 5 at the end with duplicate ID errors.

[zihanxu3]

Same here - has anyone found a solution yet? Please kindly advise, thanks!

[mtan11]

I have the same issue. Does anyone solve this problem?

[xsudiptaster]

Having the same Issue.. AddNode is adding two nodes at once..