title: React 15 - Finding offsetTop property of an element
body: <p>I am working on a React application which has two clickable elements. For simplicity sake, let's assume they are two buttons one of which is positioned higher than the other.</p>
  
  <p>In reality there could be 30 of these buttons all positioned in a vertical list which can be scrollable as well.</p>
  
  <pre><code>import { Button } from 'react-bootstrap';
  
  &lt;Button ref={(ref) =&gt; this.button1 = ref onClick={() =&gt; getHeight(this.button1)} }&gt;Top&lt;/Button&gt;
  &lt;Button ref={(ref) =&gt; this.button2 = ref onClick={() =&gt; getHeight(this.button2)}}&gt;Bottom&lt;/Button&gt;
  </code></pre>
  
  <p>I need to calculate the relative height between one button and another depending on which two buttons were clicked and use that to dynamically give height to a div. </p>
  
  <p>The <code>getHeight</code> function looks like:</p>
  
  <pre><code>getHeight = (button) =&gt; {
      console.log(button.current.offsetTop);
      // In reality, it would store this y-value somewhere for this button
  }
  </code></pre>
  
  <p>When running this, <code>undefined</code> is returned whenever I click a button.</p>
  
  <p>In React, how do I access the <code>offsetTop</code> property of a element reference? I care about the absolute offset, not just a viewport offset. This means that when I scroll down to a button off the screen, I get the true offset from the top of the page not just what it is visually.</p>
  
  <p>A few items of note:</p>
  
  <ul>
  <li><p>I am using React 15 and not 16 and do not have access to the <code>React.createRef</code> function.</p></li>
  <li><p>Because this is a React application, if people could suggest solutions that did not involve JQuery that would be best.</p></li>
  </ul>