Cannot Update Graph - Errors Thrown

Hi,

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) {
    setUserInput(event.target.value)
  }

  function handleClick(event) {
    let raw_input = user_input

    console.log(raw_input)

    if (raw_input === '') {
      return
    }

    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_nodes.push(node)
    }

    new_graph['nodes'] = new_nodes

    setGraph(new_graph)
  }

  return (
    <div>
      <nav>
        <a href=""> back to Homepage</a>
      </nav>
      <div className="button-container">
        <button onClick={handleClick}>Draw Graph</button>
      </div>
      <div className="App">
        <textarea
          id="user-input"
          className="inputs"
          onChange={handleChange}
        ></textarea>
        <div className="graph-container">
          <Graph
            key={uuidv4}
            graph={graph}
            options={options}
            events={events}
            getNetwork={(network) => {}}
          />
        </div>
      </div>
    </div>
  )
}

export default App

This however throws a bunch of errors as follows:

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.

EDIT:

I had a look at this issue:

https://github.com/crubier/react-graph-vis/issues/83

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

[abel061990]

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

[lucy-shen]

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