Error Getting Component Position with ref (ReactCannot read property 'getBoundingClientRect' of null")

Question

I want to get the position of the Skills component and add an animation when the scroll reaches to that point. However, it returns an error "TypeError: Cannot read property 'getBoundingClientRect' of null". I followed tried to follow this blog but I don't know what I am doing wrong. Can somebody help me?

Card.js

import classes from './Card.module.css';
import React from 'react';

const Card = React.forwardRef((props, ref) => {
  return (
    <section
      className={`${classes.card} ${props.className}`}
      id={props.id}
      ref={ref}
    >
      {props.children}
    </section>
  );
});

export default Card;

Skills.js

const Skills = () => {
  const ref = React.createRef();
  const topPos = ref.current.getBoundingClientRect().top;

  const onScroll = () => {
    const scrollPos = window.scrollY + window.innerHeight;
    if (topPos > scrollPos) {
      // enter animation code here
    }
  };

  useLayoutEffect(() => {
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <Card className={classes.skills} id='skills' ref={ref}>
      <H2>Skills</H2>
      <div className={classes['skills-list-container']}>
        <div className={classes['skills-list']}>{skillsList}</div>
      </div>
    </Card>
  );
};

export default Skills;

Answer 1

You are reference to ref.current before it gets attached to element

After creating a ref, you will need to wait for the initial render, then that ref will be attached to an actual element.

By doing like above, you are accessing ref.current before the initial render result in a null.

So just move it inside your onScroll function like so:

const onScroll = () => {
  const topPos = ref.current.getBoundingClientRect().top;  <-- MOVE HERE
  const scrollPos = window.scrollY + window.innerHeight;
  if (topPos > scrollPos) {
    // enter animation code here
  }
};

---

Moving your ref.current to eventHandler body because that handler is only being triggered after the component is completely rendered so ref also already be attached.