Cannot add item: item with id <ID> already exists. Graph not updating.

const [graphData, setGraphData] = useState(g1)

// addNode onClick function for button Change Graph.

const addNode = (e) => {
    e.preventDefault()
    console.log('addNode clicked!')
    setGraphData(g2)
  }

return
<div className='graphContainer'>
          <Graph
                graph={graphData}
                options={options}
            />
</div>

graphData is updated with correct data but <Graph> component gives error saying Cannot add item with existing ID but g1 and g2 has nodes with different IDs.

[greysonevins]

@chandrarishabh so I had an example where I select a graph number to load with useState and got the same result of where it breaks from already exists so I added a key prop to the Graph like I would for mapping children and for some reason that resolves it for me.

basically, react needs a way to identify it as a new child of the whole component so that it doesn’t rerender an older one.

<Graph
                key={selectGroup}
                graph={
                  {
                    nodes: graph.nodes.filter(n => n.network === parseInt(selectGroup)),
                    edges: graph.edges.filter(n => n.network === parseInt(selectGroup)),
                  }
                }
                options={options}
                events={events}

            />```

[greysonevins]

@chandrarishabh I made a codesandbox for it

https://codesandbox.io/s/interesting-spence-onwor?file=/src/App.js

Basically the selectGroup in my case was an id to graph, in this example, I add a new random node and edge to the graph and use a uuid as key.

You’ll see that there are two factors that fix this bug, a deep clone of the graph when reseting or adding a node and the uuid for the key.

I think the issue is that when you manipulate the data as is without deepcloning it, the graph representation of the object tells the Graph that it hasn’t changed and without a key, the wrapper doesn’t know it is a different graph