React ref.current is null

If you are using react-redux and wrapped your component in connect function then you need to pass fourth argument i.e. forwardRef like this.

connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})

I hope it will be helpful.

So the thing about refs is that they aren't guaranteed to be set on first render. You can be sure they are set during and after componentDidMount so you have two ways going forward.

You could use the callback style ref and set state based on that. E.g. instead of passing your ref as the prop, you can pass in a reference to a function like this.handleRef and it would do some logic in there:

  handleRef = r => {
    this.setState({ bodyHeight: r.clientHeight})
    this.calendarBodyRef.current = r;
  };

Or, you could keep your current set up but you would have to move your clientHeight bit to a lifecycle function like:

  componentDidMount() {
    this.setState({ bodyHeight: this.calendarBodyRef.current.clientHeight });
  }

Ultimately, you can't immediately read the current value of a ref like that, you would have to check it after the render and then read your bodyHeight from state.

You could use a ref callback function. In this case, you wouldn't need to use "React-createRef()".

<tbody ref={this.calendarBodyRef}>
...
calendarBodyRef = (e) => {
console.log(e)
}

You will get the DOM Element back and therefore don't need to use "current".