Getting Error This.node(...) Is Null Using React?

I am trying to implement javascript demo in react. see vanila javscript demo is working fine https://codesandbox.io/s/vigorous-satoshi-s5dzs but I am trying to implement same thing

Solution 1:

You need the html element for d3.select , youse refs, and useEffect to select the element after the component is mounted : Working sandBox

function App() {
  var fsm = new StateMachine({
    init: "open",
    transitions: [
      { name: "clodsdse", from: "open", to: "closed" },
      { name: "open", from: "closed", to: "open" },
      { name: "openss", from: "closed", to: "open" },
      { name: "ss", from: "a", to: "b" }
    ]
  });

  var elem = null;

  useEffect(() => {
    d3.select(elem)
      .graphviz()
      .renderDot(visualize(fsm));
  }, [fsm, elem]);

  return (
    <div className="App">
      <div id="graph" ref={e => elem = e}/>
    </div>
  );
}