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

Question

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()}
    )
}

this.state.questionsData a populated array when the component first renders? I don't see any issue with this code. — Drew Reese
– Drew Reese, Commented Jan 27, 2021 at 10:09
@DrewReese yes it's a populated array. The issue is I can't put a force render method (a setState or a forceUpdate) after the render method of the function — David Johns
– David Johns, Commented Jan 27, 2021 at 10:31
if you map directly from this.state.questionsData instead of assigning first to questionsList ? Or directly inline ? does it work better ? — Ivo
– Ivo, Commented Jan 27, 2021 at 10:43
If your state is populated then I see no reason for that drawArrows function not to return JSX to be rendered. Are you sure it's populated at the time? Are you doing some state mutation elsewhere in the component? Can you provide a more complete component code example? Pretty much any time you get to a point where you think you need to "force react to render" you've done something wrong. — Drew Reese
– Drew Reese, Commented Jan 27, 2021 at 10:46
Console logs can be a bit tricky as they are asynchronous in nature. Can you include a better code example? Could you also try distilling your code down to a minimal, reproducible example running in a codesandbox that we could debug in? Often you will find that when creating a minimal example your bug/issue will become very apparent. — Drew Reese
– Drew Reese, Commented Jan 27, 2021 at 10:52

Mahdi Ashouri · Accepted Answer · 2021-01-27 11:24:02Z

1

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 }
)

}

answered Jan 27, 2021 at 11:24

Mahdi Ashouri

5625 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Drew Reese Over a year ago

Storing React components in component state is a sure-fire way to introduce stale enclosures, it's an anti-pattern. Store the data and generate the view from state when rendering. Also, the effect with empty dependency will run only once when the component mounts and the questionsData state is an empty array, so nothing will be rendered on the initial render cycle, and nothing will be rendered on any subsequent render cycles.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related