I use react-lineto to draw a <LineTo> between two divs based on their classNames (highlightedArea and guidelineBlockExpanded). Initially, those divs are not present on the page - guideline block expands on click, and the relevant highlighted area is rendered. Simultaneously I am drawing a line between them.

The problem is, as I suspect, the react-lineto looks for divs with the given classNames using document.getElementsByClassName(className) before the new highlightedArea is rendered. Therefore resulted line starts from the old hidhlightedArea and points to the right (current) guidelineBlockExpanded.

Is there a way to force a React component to be rendered after all other elements? I tried to force re-render on componentDidUpdate() but then the rendering order remains the same.

0 Answers