React ref.current is null : <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>
