title: React ref.current is null
body: <p>I'm working on an agenda/calendar app with a variable time range. To display a line for the current time and show blocks for appointments that have been made, I need to calculate how many pixels correspond with one minute inside the given time range.</p>
  
  <p>So for example: If the agenda starts at 7 o'clock in the morning and ends at 5 o'clock in the afternoon, the total range is 10 hours. Let's say that the body of the calendar has a height of 1000 pixels. That means that every hour stands for 100 pixels and every minute for 1,66 pixels.</p>
  
  <p>If the current time is 3 o'clock in the afternoon. We are 480 minutes from the start of the agenda. That means that the line to show the current time should be at 796,8 pixels (480 * 1,66) from the top of the calendar body.</p>
  
  <p>No problems with the calculations but with getting the height of the agenda body. I was thinking to use a React Ref to get the height but I'm getting an error: <code>ref.current is null</code></p>
  
  <p>Below some code:</p>
  
  <pre><code>class Calendar extends Component {
      calendarBodyRef = React.createRef();
  
      displayCurrentTimeLine = () =&gt; {
          const bodyHeight = this.calendarBodyRef.current.clientHeight; // current is null
      }
  
      render() {
          return (
              &lt;table&gt;
                  &lt;thead&gt;{this.displayHeader()}&lt;/thead&gt;
                  &lt;tbody ref={this.calendarBodyRef}&gt;
                      {this.displayBody()}
                      {this.displayCurrentTimeLine()}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          );
      }
  }
  </code></pre>