question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

warning: Key error on same link with different link types ?

See original GitHub issue

Is your feature request related to a problem? Please describe.

Warning: Encountered two children with the same key, `n7,n6`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in g (created by Graph)
    in svg (created by Graph)
    in div (created by Graph)
    in Graph (at visualization.js:46)
    in div (at visualization.js:45)
    in Visualization (at graph.js:49)
    in div (at graph.js:47)
    in section (at graph.js:24)
    in Graph (at App.js:34)
    in main (at layout.js:149)
    in div (at layout.js:100)
    in Layout (at App.js:33)
    in ApolloProvider (at App.js:32)
    in App (at src/index.js:8)

I get this key error, on the same edge with different type i.e line and curve_full for eg: This is likely because the keys are named based on the link however these links based on the type should be treated separately to avoid this warning.

Describe the solution you’d like A possible solution would be to attach type of the link with the keys or attach some unique id here in case if several links on the same edge are defined(This is not currently possible i think which should be also another feature i would like to see).

Describe your use case I am building a network graph that consists of local and global links and has to be defined distinctively to identify how are the messages are being passed i.e locally or globally.

Describe alternatives you’ve considered I tried to inverse the position of source and target but this is really hacky and I don’t like this solution

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
danielcaldascommented, Jan 11, 2020

Thinking through I assume that also assigning a link id and using that as a key would be a much better approach with each link having a unique id assigned.

@gopherine Would this be an id defined by the client-side? Meaning, you as a developer using react-d3-graph would have the responsibility of assigning the right id per each link? Or do you still think that is something that we should figure out internally within the library itself?

1reaction
gopherinecommented, Dec 13, 2019

yes, this would fix my issue for now, but then potentially the same two nodes can have not just two but even more edges for example - I am working on an algorithm where,I have three different types of edges global hidden and local edge. This would be some kind of major change I think so as each edge on the same node can be detected individually also without key error it is highly possible that they might have same edge type as well in some cases, in this case, appending type to link is not a long term solution.

Thinking through I assume that also assigning a link id and using that as a key would be a much better approach with each link having a unique id assigned.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Each child in a list should have a unique "key" prop - Stack ...
Warning : Each child in a list should have a unique "key" prop. Check the render method of `MyComponent`. in React. The error...
Read more >
How to merge issue link types | Jira - Atlassian Documentation
In this case, proceed with deleting the duplicate link type. You will be prompted to swap it: Once you confirm the deletion, all...
Read more >
Python KeyError Exceptions and How to Handle Them
In this tutorial, you'll learn how to handle Python KeyError exceptions. They are often caused by a bad key lookup in a dictionary,...
Read more >
Links in HTML documents - W3C
The following HTML excerpt contains two links, one whose destination anchor is an HTML document named "chapter2.html" and the other whose destination anchor ......
Read more >
3 common foreign key mistakes (and how to avoid them)
3 common foreign key mistakes (and how to avoid them) · 1. Mismatched data types · 2. Dangling foreign keys · 3. Not...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found