title: React: Get height of element, and this.ref has empty current
body: <p>How can I get the height of a div inside my component? I have the following code:</p>
  
  <pre><code>constructor(...) {
    ...
    this.detailsRef = React.createRef();
  }
  
  render() {
    return (
      &lt;div&gt;
        &lt;span&gt;A title&lt;/span&gt;
        &lt;div ref={this.detailsRef}&gt;Some details&lt;/div&gt;
      &lt;/div&gt;
    );
   }
  </code></pre>
  
  <p>I have read that you can get the element's height by doing this:</p>
  
  <pre><code>this.detailsRef.current.clientHeight
  </code></pre>
  
  <p>or </p>
  
  <pre><code>this.detailsRef.clientHeight
  </code></pre>
  
  <p>However, that does not work for me. Do anyone have any suggestions?</p>
  
  <p><strong>Answer</strong></p>
  
  <p>Ok, the reason for why I did not get the height from <code>this.detailsRef.current.client</code> was because my <code>div</code> with the <code>ref</code>attached to it was a div created by <code>styled-components</code>. So when I changed my styled-component div to an ordinary div, it worked.</p>