0

I'm trying to get the exact height of a div in React

    <div ref="pageContainer" className="flex flex-start">
      <div>
        <Title getTitleSize={this.getTitleSize} title={title} size={titleWidth} />
      </div>
      <div>
        {children}
      </div>
    </div>

By acessing the height of a div with offsetHeight

componentDidMount(){ this.refs.pageContainer.offsetHeight this.setState({divHeight: this.refs.pageContainer.offsetHeight + 'px'}) }

But I noticed that when directly accessing this.refs.pageContainer.offsetHeight it returns a different value than when looking up what the actual value is in the object this.refs.pageContainer

For example this.refs.pageContainer.offsetHeight will return 231 but when looking at the object the value is clearly 251. It slightly changes the pixel values of other properties on that object as well. Why would the object not return the value it's supposed to have?

Also after the component updates if I access the same value in componentWillUpdate it returns the right value.

Farris Ismati
  • 176
  • 1
  • 9
  • When you are accessing and assigning the value to state it may so happen that the height of the container is different, but after an update it has change and since console.log() prints the value a little later, you see the updated value – Shubham Khatri Dec 25 '17 at 17:39
  • 1
    You might want to check this question https://stackoverflow.com/questions/44362783/value-below-was-evaluated-just-now-in-javascript-object/44362860#44362860 – Shubham Khatri Dec 25 '17 at 17:54

0 Answers0