title: offsetHeight returns 0 when rendering text into a div using a API
body: <p>I have a div which renders some text taken from a API call. I want to add a <code>See more</code> button if it
  exceeds 3 lines. Following is my implementation for that.</p>
  <pre><code>         seeMore(){
              this.setState({
              seeMore: !this.state.seeMore
            })
           }
  </code></pre>
  <p>Inside render method</p>
  <pre><code>        function countLines() {
              var el = document.getElementById(&quot;about&quot;);
              var divHeight = el &amp;&amp; el.offsetHeight;
              var lines = divHeight / 24;
              return lines;
          }
  </code></pre>
  <p>//above 24 is my line height.</p>
  <p>Inside return</p>
  <pre><code> &lt;div&gt;
         &lt;div id=&quot;about&quot; style={{WebkitLineClamp:seeMore ? '':3}}&gt;
            {expert.bio}
         &lt;/div&gt;
         {expert.bio !== undefined &amp;&amp; (countLines() &gt;= 3 &amp;&amp; 
         &lt;span onClick={this.seeMore.bind(this)}&gt;{seeMore === true ? 'See less': 'See more'}&lt;/span&gt;)}
   &lt;/div&gt;
  </code></pre>
  <p>In the above solution my <code>offsetHeight</code> always returns a <code>0</code> even though there are content inside the div. I have set a condition to run the <code>countLines</code> function only when content is available. But still i get a <code>0</code> value for <code>offsetHeight</code>.</p>
  <p>I have tried this solution with hardcoded values and then this works. It doesn't work only when rendering the text that is taken from a API.</p>