TypeError: Cannot set properties of undefined (setting 'transform')

Question

This is the part of my react application, where I've used a ref.current which is equal to null, then I'm changing it's property, I know like this is surely gonna give me error but in one of my friend's project with same react component WorkPage it's working fine. I'm so confused, is there any sort of fault in mine?

const WorkPage = () => {
  const ref = useRef(null);

  useEffect(() => {
    let element = ref.current;

    const rotate = () => {
      element.style.transform = `translateX(${-window.pageYOffset}px)`
    };

    window.addEventListener('scroll', rotate)
    return () => window.removeEventListener('scroll', rotate)
  }, [])

Cuong Vu · Accepted Answer · 2022-01-18 10:23:15Z

2

Surely it will throw error, because you did not assign ref to any DOM element, so ref.current is always null. Make sure to assign it to a DOM element like this:

const WorkPage = () => {
  const ref = useRef(null);

  useEffect(() => {
    let element = ref.current;

    const rotate = () => {
      element.style.transform = `translateX(${-window.pageYOffset}px)`;
    };

    window.addEventListener("scroll", rotate);
    return () => window.removeEventListener("scroll", rotate);
  }, []);

  // assign ref to one of your DOM element
  return <div ref={ref}>your element</div>;
};

answered Jan 18, 2022 at 10:23

Cuong Vu

3,72316 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gourav Singh Rawat Over a year ago

yeah, it worked, appreciate that 👍

nart · Accepted Answer · 2022-01-18 09:56:28Z

1

refs is not guaranteed to be set on first render caveats-with-callback-refs so you need to check if the element exists before you try to manipulate it directly in the DOM

if (ref && ref.current) {
  // do something
}

answered Jan 18, 2022 at 9:56

nart

1,8782 gold badges15 silver badges26 bronze badges

Comments

Guram Khasia · Accepted Answer · 2022-01-18 10:15:08Z

0

On first render ref is undefined. You can use optional chaining operator

let element = ref?.current;

answered Jan 18, 2022 at 10:15

Guram Khasia

2162 silver badges10 bronze badges

Comments

utkarsh-k · Accepted Answer · 2022-01-18 10:48:44Z

You can try 2 things :

Firstly,

    let element = ref.current;
        if(element) {
            const rotate = () => {
              element.style.transform = `translateX(${-window.pageYOffset}px)`
            };
         }
........

Secondly,

If first doesn't work then debug to find out if your code is going inside the if statement added previously. If it's not going there then : In the initial rendering your element to which you might have passed the ref(I am assuming you have done that already) might not be available. So your ref.current and hence element variable will be undefined inside use effect. So to bypass that you execute your logic inside setTimeout() like below :

    useEffect(() => {
    setTimeout(() => {
    let element = ref.current;
    if(element){
      const rotate = () => {
          element.style.transform = `translateX(${-window.pageYOffset}px)`
        };
    
    }
        window.addEventListener('scroll', rotate)
        return () => window.removeEventListener('scroll', rotate)
      }, [])
    
    }, 200)
.......

Collectives™ on Stack Overflow

TypeError: Cannot set properties of undefined (setting 'transform')

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related