React select div height when DOM is loaded

Question

I am having issues with react Plotly displaying correctly when a graph loaded in a hidden tab is selected. It seems this is a known issue where every tab but the default tab will not resize appropriately because it doesn't know the hidden graph's dimensions.

To get around this I would like to dynamically update the tab height to be equal to the height of the default tab. Something like this: Change div height when tab is selected.

The issue is, I am unable to select the tab height value on DOM load. I thought I could add a componentDidMount function with an evenlistener for window load like such:

    constructor(props) {
        super(props)
        this.state = {
            value: 0
        };
        this.handleLoad = this.handleLoad.bind(this);
    }

    componentDidMount() {
        window.addEventListener('load', this.handleLoad);
    }

    handleLoad() {
        console.log("firstTab height: " + $('#firstTab').offsetHeight)
    }

This issue is, the console log is outputting firstTab height: undefined.

When i inspect the web page and put the command $('#firstTab').offsetHeight into the console I am able to come up with a height of 697 px.

I don't want to hardcode the tab pixel size. Can anyone guide me as to why I am failing to grab the element height on window load?

Answer 1

Try using clientHeight property.

componentDidMount() {
    const height = document.getElementById('firstTab').clientHeight;
}

Answer 2

I think instead of using event listener, you can do something like this.

componentDidMount() {
    const height = this.firstTab.clientHeight;
    console.log(height) // => gives you height
}

render() {
    return (
      <div 
        id="firstTab"
        ref={ (firsTabElement) => { this.divElement = firstTabElement } }
      >
        Tab Content
      </div>
    )
  }

After the first render if you are not hiding or putting any condition to remove the firstTab from the DOM. It will be available to you in componentDidMount lifecycle.