A duplicate id was found in the parameter array error with hello world example

[jrraymond]

Thank you for this project!

I tried to recreate the example from the readme with some very minor modifications (no explicit call to ReactDOM). The example renders correctly but fails when the component re-renders with the following error:

Error: A duplicate id was found in the parameter array.
r.value
src/data-set.ts:263
  260 | if (Array.isArray(data)) {
  261 |   // Array
  262 |   const idsToAdd: Id[] = data.map((d) => d[this._idProp] as Id);
> 263 |   if (idsToAdd.some((id) => this._data.has(id))) {
      | ^  264 |     throw new Error("A duplicate id was found in the parameter array.");
  265 |   }
  266 |   for (let i = 0, len = data.length; i < len; i++) {

import Graph from "react-graph-vis";


function App() {
  const graph = {
    nodes: [
      { id: 1, label: "Node 1", title: "node 1 tootip text" },
      { id: 2, label: "Node 2", title: "node 2 tootip text" },
      { id: 3, label: "Node 3", title: "node 3 tootip text" },
      { id: 4, label: "Node 4", title: "node 4 tootip text" },
      { id: 5, label: "Node 5", title: "node 5 tootip text" }
    ],
    edges: [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 4 },
      { from: 2, to: 5 }
    ]
  };

  const options = {
    layout: {
      hierarchical: true
    },
    edges: {
      color: "#000000"
    },
    height: "600px"
  };

  const events = {
    select: function(event: any) {
      var { nodes, edges } = event;
    }
  };
  return (
    <Graph
      graph={graph}
      options={options}
      events={events}
    />
  );
}

export default App;

I'm using the following versions:

    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-graph-vis": "^1.0.7",
    "typescript": "^4.2.2",

[hjlee94]

Check out this issue #92.
In my case, It works. I hope this will help you.

[oshhh]

@jrraymond were you able to resolve this issue?

[vishnu-dev]

It happens to me every time on Reacts DOM update sequence. @crubier Can this get some attention?

[ivgtr]

I think it's problem is caused by unnecessary re-rendering, which creates a new component with the same key as the previous one.
This problem can be solved by differentiating components like or memoizing components by wrap them like React.memo().

The Math.random() method will play the animation every time it is re-rendered.
The React.memo() method also re-renders the nodes when you add props to the Graph component itself, so the animation plays.
I don't like this behavior very much. umm...

[ZachHaber]

I put what I've seen about where this problem is coming from on #92 (comment)
Having to set keys to force re-creating the component isn't an ideal solution, and it'd be good for this to be StrictMode compatible.

[coder-Rit]

I think it's problem is caused by unnecessary re-rendering, which creates a new component with the same key as the previous one. This problem can be solved by differentiating components like or memoizing components by wrap them like React.memo().

The Math.random() method will play the animation every time it is re-rendered. The React.memo() method also re-renders the nodes when you add props to the Graph component itself, so the animation plays. I don't like this behavior very much. umm...

This solution work for me, thanks @ivgtr

[YXR9]

I also encountered this problem in React 18, and I had been solved by remove <React.StrictMode></React.StrictMode> in index.js.

[Davste93]

Late to the party, but just do this instead:

const [graph, setGraph] = useState({
        nodes: [
            { id: 1, label: 'Node 1', title: 'node 1 tootip text' },
            { id: 2, label: 'Node 2', title: 'node 2 tootip text' },
            { id: 3, label: 'Node 3', title: 'node 3 tootip text' },
            { id: 4, label: 'Node 4', title: 'node 4 tootip text' },
            { id: 5, label: 'Node 5', title: 'node 5 tootip text' },
        ],
        edges: [
            { from: 1, to: 2 },
            { from: 1, to: 3 },
            { from: 2, to: 4 },
            { from: 2, to: 5 },
        ],
    });
    ```

[karthik2603-theBrogrammer]

I also encountered this problem in React 18, and I had been solved by remove <React.StrictMode></React.StrictMode> in index.js.

Worked for me :)

[ObaidAshiq]

Removing React's Strict mode isnt a good choice