React track height of div in state? - reactjs

Question

I found the code snippet from this answer for tracking page size to be useful. I want to switch window.innerHeight with $("#list_container").height:
constructor(props) {
super(props);
this.state = { width: 0, height: 0 };
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener('resize', this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateWindowDimensions);
}
updateWindowDimensions() {
// !!! This works:
this.setState({ width: window.innerWidth, height: window.innerHeight });
// !!! This doesn't work:
this.setState({ width: $("#list_container").width(), height: $("#list_container").height() });
}
Edit: Updated to .width() and .height(), had tried both but neither is working for me.
List container is defined in the same module as the outer div:
render() {
return (
<div id="list_container">
<ListGroup>
<VirtualList
width='100%'
height={this.state.height}
itemCount={this.state.networks.length}
itemSize={50}
renderItem={({index, style}) =>
<ListGroupItem
onClick={() => this.updateNetwork(this.state.networks[index].ssid, this.state.networks[index].security)}
action>
{this.state.networks[index].ssid}
</ListGroupItem>
}
/>
</ListGroup>
<Modal/>
// ...
Note:
If I do:
<p>{this.state.height}</p>
It isn't 0 just empty, with the example that doesn't work.

Answer 1

If it's jQuery you're using, width() and height() are functions, not properties. Try:
this.setState({ width: $("#list_container").width(), height: $("#list_container").height() });

Answer 2

you need to use refs since the js might be running before the component renders to the dom.
React documentation on refs
render() {
return (
<div id="list_container" ref={ el => this.componentName = el }>
// ...
to reference this dom node in this component you just have to call this.componentName
updateWindowDimensions = () => {
$(this.componentName).height() // returns height
}

Answer 3

To expand on Erics answer using refs, to pull it off without jQuery, you can use getBoundingClientRect:
const listRect = document.getElementById('list_container').getBoundingClientRect();
or if using the ref from Erics answer:
const listRect = this.componentName.getBoundingClientRect();
followed by
this.setState({
width: listRect.width,
height: listRect.height
});
I would suggest this page for some good examples of life without jQuery.
Also, I would strongly suggest debouncing the resize handler.