How to change node's image by fetching svg-image from web-api.

[chanmoto]

I am still biginner , not clear how to using react component more over this library.
But I believe that vis.js is a good libruary, compare to other network graph library such as cytoscape.js.

Now my challage has been successed when I used cytoscape.js ( import library is "react-cytoscapejs")

version of cytoscape
(This code is carrying successfully.)

Cytoscape.js has a reference end point ( myCyRef for example).
https://github.com/plotly/react-cytoscapejs/blob/master/README.md#reference-props

So I can change object properity directry through it.
( It's very useful whom don't know react comonent inside, like me.)

My desire is a simple, I want to use vis.js library like a non react component sometimes.
( ofcourse my skill will up grade in the future. but now, I need a guide to step up simply.)

let myCyRef = null;

constructor(props) {
    super(props);
    this.state = {
      elements: {},
    }
  }

  componentDidMount() {
    const Cross = fetchCrossvalidData();
    this.setState({ elements: Cross });
  }

componentDidUpdate() {
    this.loadSVG();
    }

loadSVG() {
    this.state.elements.map((value, index, array) => {
      const params = { // some querying code was written here  // }
      const query = new URLSearchParams(params);
      fetch(
        apiurl+'/svg?'+query.toString()
      )
        .then(r => r.text())
        .then(data => {
          if(data.indexOf('<svg')>0)  //get some svg data
          {
          data=data.replaceAll('\\',"").slice(1).slice(0,-1);
          myCyRef.filter("node[id='" + value['data'].id + "']").css("background-image", "data:image/svg+xml;utf8," + encodeURIComponent(data));
          }
        }).catch(err => {
          console.log(err);
        });
    });
  }
render() {
    if (this.state.elements.length > 0 && this.state.crossvalid.length > 0) {
      
      return (
        <CytoscapeComponent cy={(cy) => { myCyRef = cy; }}
          stylesheet={styles}
          elements={this.state.elements}
          style={{ minWidth: "800", minHeight: "800px" }}
          layout={layout}
        />
      );
    } else {
      return <div className="App">
        Loading...Patent Data</div>
    }
  }