react xarrows not render properly when site load first time

Question

When site load first lines are not properly connect to given elements

After reload page once lines are properly connect to given elements

this is my diagram.js component

import React from "react";
import Xarrow, { Xwrapper } from "react-xarrows";
import './Diagram.css';

class Diagram extends React.Component{
    constructor(props) {
            super(props);
            this.state = {
              lines:[
                    {       
                    start:"test3",
                    end:"test1" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false
                    },
                    {       
                    start:"test3",
                    end:"test2" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false
                    },
                    {       
                    start:"test3",
                    end:"test4" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false        
                    },
                    {       
                    start:"test3",
                    end:"test5" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false        
                    },
                    ]
            }
    }

    render(){
            return(
                    <Xwrapper>
                            <div className="bulma-col columns is-2 is-multiline is-mobile">

                                    <div className="column is-4">
                                    <img className="icon is-medium" src='' alt="test1" id="test1"/>
                                    <div>test1</div>
                                    </div> 
                                    
                                    <div className="column is-4"></div>

                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test2" id="test2" />
                                            <div>test2</div>
                                    </div>
                                    <div className="column is-4"></div>

                            
                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test3" id="test3" />
                                            <div>test3</div>
                                    </div>
                                    <div className="column is-4"></div>

                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test4" id="test4" />
                                            <div>test4</div>
                                    </div>
                                    <div className="column is-4"></div>
                                    
                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test5" id="test5" />
                                            <div>test5</div>
                                    </div>
                                    {this.state.lines.map((line,i)=>(<Xarrow key={i} {...line} />))}
                            </div>
                    </Xwrapper>
            )
        
    }
}
export default Diagram;

I tried to figure a way to fix this bug. I tried to create lines in state. I googled this but have no any solution.can someone help me to figure this out

Answer 1

I used useXarrow react-xarrows hook and changed my code like this.My issue was fixed.But I don't know how,why and is it the best solution?

import React from "react";
import Xarrow, { useXarrow } from "react-xarrows";
import './Diagram.css';

const Diagram =()=>{
      const lines=[
               {       
                start:"test3",
                end:"test1" ,
                color:'green',
                path:'grid',
                dashness:{ animation: 1 },
                showHead:false
                },
                {       
                start:"test3",
                end:"test2" ,
                color:'green',
                path:'grid',
                dashness:{ animation: 1 },
                showHead:false
                },
                {       
                start:"test3",
                end:"test4" ,
                color:'green',
                path:'grid',
                dashness:{ animation: 1 },
                showHead:false        
                },
                {       
                start:"test3",
                end:"test5" ,
                color:'green',
                path:'grid',
                dashness:{ animation: 1 },
                showHead:false        
                },
      ]
      return(
            <div onLoad={useXarrow()} className="bulma-col columns is-2 is-multiline is-mobile">

                                <div className="column is-4">
                                <img className="icon is-medium" src='' alt="test1" id="test1"/>
                                <div>test1</div>
                                </div> 
                                
                                <div className="column is-4"></div>

                                <div className="column is-4">
                                        <img className="icon is-medium" src='' alt="test2" id="test2" />
                                        <div>test2</div>
                                </div>
                                <div className="column is-4"></div>

                        
                                <div className="column is-4">
                                        <img className="icon is-medium" src='' alt="test3" id="test3" />
                                        <div>test3</div>
                                </div>
                                <div className="column is-4"></div>

                                <div className="column is-4">
                                        <img className="icon is-medium" src='' alt="test4" id="test4" />
                                        <div>test4</div>
                                </div>
                                <div className="column is-4"></div>
                                
                                <div className="column is-4">
                                        <img className="icon is-medium" src='' alt="test5" id="test5" />
                                        <div>test5</div>
                                </div>
                                {lines.map((line,i)=>(<Xarrow key={i} {...line} />))}
        </div>
        )
}
export default Diagram;