javascript - How to draw an arrow from one div to another in React dynamic JSX?

Question

I have a react app with some dynamic divs coming from a function that processes a dataset to be connected via arrows. Each div is a "Question" and each question has "answers" and each answer has its sub-question. The relationship between sub-questions and answers is, each answer and the related sub-question has the same id with different prefixes (if the answer has id "option8", the related sub-question is "q8"). The problem is, the function is running, but can't see any arrow.

But when I try with static HTML div ids, arrows can be seen properly

I found the npm module "react-dom-arrow" and created a function to map each answer and its sub-question and draw an arrow as follows.

drawArrows = () => {
    const questionsList = this.state.questionsData;
    return questionsList.map(each => {
        return (
            <Arrow
                fromSelector={`#option${each.order}`}
                fromSide={'right'}
                toSelector={`#q${each.order}`}
                toSide={'left'}
                color={'blue'}
                stroke={3}
            />
        )
    });
}

render () {
    return (
       ...code
       { this.drawArrows() }
    )
}

I thought to go with my own SVG arrow method, but don't have a proper idea that how to create SVGs with div ids. How can I solve this even in a different way?

question from:https://stackoverflow.com/questions/65915768/how-to-draw-an-arrow-from-one-div-to-another-in-react-dynamic-jsx

Answer 1

Waitting for answers