CODEWITHSUNDEEP
javascriptreactjs
David Johns
David Johns

Reputation: 1734

How to re-render a react component after returning something in a function?

I'm creating a react app with a method to draw some arrows among divs. The function doesn't produce arrows right away returns the JSX but just after I manually re-render the DOM by scrolling the page or do a route change. How can I force render the DOM after the return of the function?

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

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

Upvotes: 1

Views: 620

Answers (1)

Mahdi Ashouri
Mahdi Ashouri

Reputation: 562

you can do it easy with functional Component with useState and useEffect

import { useState } from 'react';
const ComponentName = () => {
const [arow, setArow] = useState();
const [questionsData, setQuestionsData] = useState([]);
const drawArrows = () => questionsData.map(each =>
    <Arrow
        key={each.order}
        fromSelector={`#option${each.order}`}
        fromSide={'right'}
        toSelector={`#q${each.order}`}
        toSide={'left'}
        color={'#ff6b00'}
        stroke={3}
    />
);
useEffect(() => {
    setArow(drawArrows())
}, [])
return (
    { arow }
)

}

Upvotes: 1

Related Questions