How to get height of a div in react js

Question

I'm trying to get height of a parent div using React JS.

The html structure is as follows :

<div ref="sectionSlider">
   <div class="detailsOutterDiv">
      <div class="swiper" style="width: 100%;">
         <div class="detailsInnerDiv">
              <div class="slide">
                 <img src="someURl" style="background-color: black;">
              </div>
              <div class="slide">
                  <img src="someURl" style="background-color: black;">
              </div>
              <div class="slide">
                <img src="someURl" style="background-color: black;">
              </div>
          </div>
      </div>

   </div>
   <div class="slider-thumbnails">
         <div class="thumb">
             <img src="someURl">
         </div>
   </div>
</div>

And the css-scss structure is like this :

.detailsOutterDiv{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.detailsInnerDiv{
  position: relative;
  top: 0px;
  left: 0px; 
  right: 0px;
  width: 10000%;
  transition: all 0.5s ease;
}

.slide{
  display: inline-block;
  margin-right: 15px;
}

.slide img{
  width: 100%;
  height: auto;
}


.slider-thumbnails{
  width: 100%;
  padding-top: $primary-margin-xs - 5;
  text-align: center;

  .thumb{
    display: inline-block;
    width: (100% / 12);

    img{
      width: 100%;
      height: auto;
      padding: 0 2px;
    }
  }
}

I'm trying to get the height of the div with ref="sectionSlider".

I tried to do this on a few ways in componentDidMount like this :

componentDidMount(){
    //First way
    let top = this.refs["sectionSlider"].offsetHeight; 

    //Second way
    let top = this.refs["sectionSlider"].clientHeight; 

    //Third way
    let top = this.refs["sectionSlider"].getBoundingClientRect().height;

    //Fourth way
    let node = this.refs["sectionSlider"];
    let nodeStyle = window.getComputedStyle(node);
    let top = parseInt(nodeStyle.getPropertyValue('height').replace(/\D/g,''));
}

And in every case top is 82 what is not true.

It looks like :

Thus, the div has height of 523.

Any idea how to solve it?

Answer 1

If the problem is (according to your guess) that the images aren't loaded you could do something like this:

const Example = React.createClass({
  getInitialState () {
    return {
      imagesLoaded: 0,
    };
  },

  printClientHeight() {
    console.log(this.wrapper.clientHeight)
  },

  updateLoadedImages() {
    this.setState({ imagesLoaded: this.state.imagesLoaded + 1 })
    if (this.state.imagesLoaded = 4) {
      printClientHeight();
    }
  },

  setWrapperRef(el) {
    this.wrapper = el;
  },

  render() {
    return (
      <div ref={this.setWrapperRef}>
        <div className="detailsOutterDiv">
          <div className="swiper" style="width: 100%;">
            <div className="detailsInnerDiv">
              <div className="slide">
                <img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/ >
              </div>
              <div className="slide">
                <img src="someURl" style="background-color: black;"  onLoad={updateLoadedImages}/>
              </div>
              <div className="slide">
                <img src="someURl" style="background-color: black;"  onLoad={updateLoadedImages}/>
              </div>
            </div>
          </div>
        </div>
        <div className="slider-thumbnails">
          <div className="thumb">
            <img src="someURl"  onLoad={updateLoadedImages}/>
          </div>
        </div>
      </div>
    );
  }
});

Obviously you could clean this up quite a bit by getting the image tag count dynamically but I think you get the point...