ReactJS get rendered component height

Question

I\'m attempting to integrate or create a React version of https://github.com/kumailht/gridforms, to do so I need to normalize the height of the columns inside of the row. Th

Answer 1

Above solutions are good. I thought I'd add my own that helped me solve this issue + others discussed in this question.

Since as others have said a timeout function is unpredictable and inline css with javascript variable dependencies (ex. style={{height: `calc(100vh - ${this.props.navHeight}px)`}}) can alter the height of elements after the componentDidMount method, there must be an update after all of the elements and inline javascript-computed css is executed.

I wasn't able to find very good information on which elements accept the onLoad attribute in React, but I knew the img element did. So I simply loaded a hidden image element at the bottom of my react component. I used the onLoad to update the heights of referenced components elsewhere to yield the correct results. I hope this helps someone else.

_setsectionheights = () => {
    this.setState({
      sectionHeights: [
        this.first.clientHeight,
        this.second.clientHeight,
        this.third.clientHeight,
      ]
    });
}

render() {
    return (
        <>
            
 { this.first = elem } }
            style={{height: `calc(100vh - ${this.props.navHeight}px)`}}
            >
                ...
            
            ...
            
        
    );
}

For the sake of being thorough, the issue is that when the componentDidMount method is executed, it only considers external css (speculation here). Therefore, my section elements (which are set to min-height: 400px in external css) each returned 400 when referenced with the clientHeight value. The img simply updates the section heights in the state once everything before it has loaded.