Source and target elements of an arrow don't update after re-mounting them

[ArtemZan]

Describe the bug & Expected behavior End and start params of Xarrow are strings, representing the id's of the html elements. If these elements are removed from the DOM and replaced with new elements with same ids, the arrow doesn't find them. As result the arrow points into the origin (0, 0) of the viewport, starts from there or completely disappears.

To Reproduce

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import Xarrow from "react-xarrows";

function Component() {
  useEffect(() => {
    console.log("Mount");
  }, []);

  return (
    <div>
      <div id="arrow-start"></div>
      <div
        id="arrow-end"
        style={{
          position: "absolute",
          top: 300,
          left: 700
        }}
      ></div>
    </div>
  );
}

export function App() {
  const [state, setState] = useState(1);
  const [state1, setState1] = useState(1);

  return (
    <div className="App">
      To break the arrow click "Remount", then "Update"
      <button onClick={() => setState((state) => state + 1)}>Remount</button>
      <button onClick={() => setState1((state) => state + 1)}>Update</button>
      <Component key={state} state={state1} />
      <Xarrow start="arrow-start" end="arrow-end"></Xarrow>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[muresan-gabriel]

Have you solved this issue?

Try looking into the Xwrapper component and the useXarrow method, as those are used for arrow updates.

This section explains the functionality.