Alert when user reaches bottom of the page

Question

I was trying to implement infinite scroll to load messages received trough a Json that i map and when the user reaches the bottom of the page it would load more. I've tried a few codes I've found on but none of them work or only gave me errors that i was not able to correct. i am not really sure on what to do.

Right now i am trying to simply show on console.log that i have reached the bottom of the page but i get the following error:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at ProxyComponent.Notifications._this.isBottom
    at HTMLDocument.Notifications._this.trackScrolling

Here is the code i have right now:

class Messages extends React.Component {
      constructor(props) {
        super(props);

    this.state = {
      messageList: [],
    };
  }

  isBottom = el => el.getBoundingClientRect().bottom <= window.innerHeight

  componentDidMount() {
    document.addEventListener('scroll', this.trackScrolling);
  }

  trackScrolling = () => {
    const wrappedElement = document.getElementById('header');
    if (this.isBottom(wrappedElement)) {
      alert('header bottom reached');
      document.removeEventListener('scroll', this.trackScrolling);
    }
  };
  componentWillMount() {
    fetchAllMessages(30, 0)
      .then(({ response }) => {
        this.setState({
          messageList: response.messages.content,
        });
      })
      .catch(() => null);
  }

  render() {
    return (
      <div>

        <Canvas >
          <Title >Messages</Title>

          {this.state.messagesList.map(i => (

            <Card key={i.id}>
              <CardContent className="cardContent">
                <div className="icon-container-message">
                  <div className={`icon ${MessageType[i.type].class}`} />
                </div>
                <div className="cardText" >
                  <Markdown>
                    {i.message}
                  </Markdown>
                  <InsertInvitation />{i.date}
                </div>
              </CardContent>
            </Card>
        ))}
        </Canvas>
      </div>

    );
  }
}

export default Messages;

I was trying to implement the solution found here: Detecting when user scrolls to bottom of div with React js