javascript - TypeError: Cannot set properties of undefined (setting 'transform') - Stack Overflow

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 ponent 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)
  }, [])

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 ponent 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)
  }, [])

• javascript
• reactjs

Share Improve this question Follow asked Jan 18, 2022 at 9:46 Gourav Singh RawatGourav Singh Rawat 44133 gold badges77 silver badges1818 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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>;
};

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
}

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

let element = ref?.current;

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)
.......