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.

Cannot Update Graph - Errors Thrown

See original GitHub issue


I am playing around with the library, but one thing that is not clear to me is how I can update the graph?

The below issue only arises if I try to create nodes greater than or equal to 5.

My code is as App.js follows:

import React, { useState } from 'react'
import './App.css'
import Graph from 'react-graph-vis'
import { v4 as uuidv4 } from 'uuid'
import cloneDeep from 'lodash/cloneDeep'

function App() {
  let nodes = [
    { id: 1, label: '1', title: '1' },
    { id: 2, label: '2', title: '2' },
    { id: 3, label: '3', title: '3' },
    { id: 4, label: '4', title: '4' },
    { id: 5, label: '5', title: '5' },

  let edges = [
    { from: 1, to: 2 },
    { from: 1, to: 3 },
    { from: 2, to: 4 },
    { from: 2, to: 5 },

  let default_graph = {
    edges: edges,
    nodes: nodes,

  let [graph, setGraph] = useState(default_graph)
  let [user_input, setUserInput] = useState('')

  const options = {
    layout: {
      hierarchical: false,
    edges: {
      color: '#000000',
    height: '500px',

  const events = {
    select: function (event) {
      let { nodes, edges } = event

  function handleChange(event) {

  function handleClick(event) {
    let raw_input = user_input


    if (raw_input === '') {

    let input = raw_input.split('\n')
    // this tells how us how many nodes to create
    let n = parseInt(input[0])

    let new_graph = {}
    let new_nodes = []
    let new_edges = []

    // create nodes - issue appears to be here
    for (let i = 1; i <= n; i++) {
      let node = {
        id: i,
        label: `${i}`,
        // title: `${i}`,

    new_graph['nodes'] = new_nodes


  return (
        <a href=""> back to Homepage</a>
      <div className="button-container">
        <button onClick={handleClick}>Draw Graph</button>
      <div className="App">
        <div className="graph-container">
            getNetwork={(network) => {}}

export default App

This however throws a bunch of errors as follows:

Screenshot 2020-09-16 at 21 05 52

Could someone please explain how I can get the graph to be updated with the new one I constructed in my handleClick function?

I am somewhat new to React, so any advice would be much appreciated.


I had a look at this issue:

I added a UUID key for the Graph component too, but that doesn’t seem to work

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:14

github_iconTop GitHub Comments

abel061990commented, Sep 18, 2020

Hello I had the same problem. I was able to fix it by removing the <React.StrictMode> tag from the index.js file.

lucy-shencommented, Jan 7, 2021

Any example with useEffect? After receive the API response i need to update my graph. The id problem still occuring in my case.

key={uuidv4()} works for me, basically what OP did originally

I updated my graph with the response from an API using useEffect

Read more comments on GitHub >

github_iconTop Results From Across the Web

Microsoft Graph error responses and resource types
Learn about errors that can be returned in Microsoft Graph responses. Errors are returned using standard HTTP status codes and a JSON error...
Read more >
MS Graph SDK throws wrong error when retrieving photo that ...
When I do a test in Graph Explorer to get my photo which doesn't exist I receive an expected error... { "error": {...
Read more >
Error handling - Apollo GraphQL Docs
For example, it throws a GRAPHQL_VALIDATION_FAILED error whenever an incoming operation isn't valid against the server's schema.
Read more >
How to Troubleshoot and Fix Excel Pivot Table Errors
Note: To change the way that error values show in a pivot table ... or "A PivotTable report cannot overlap another PivotTable report"....
Read more >
Cannot connect with new Outgoing connection using MS Graph.
Our engineer followed the instructions for the Azure-MS Graph setup ... Unable to update email send status due to following error(s): Email ...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found