I am trying to determine if my mouse pointer is near sidebar or footer area or header area and based on that i try to determine x and y values to fade in and fade out all 3 components together. But i get this error on console Uncaught TypeError: Cannot destructure property 'x' of '(intermediate value)(intermediate value)(intermediate value)' as it is undefined. At onm ouseMove

where am i going wrong.

    const onm ouseMove = (event) => {
      if (event) {
        const { clientX, clientY } = event
        let refComp
        if (e.target === sideRef?.current)
          refComp = sideRef?.current
        else if (e.target === footerRef?.current)
          refComp = footerRef?.current
        else if (e.target === headerRef?.current)
          refComp = headerRef?.current
        const { x, y, width, height } =
          refComp?.getBoundingClientRect()
        if (
          clientX > x  &&
          clientX < x   width  &&
          clientY > y  &&
          clientY < y   height 
        ) {
          setFadeOut(false)
        } else {
          setFadeOut(true)
        }
      }
    }

CodePudding user response：

Below code will handle destructring when object is undefined / null, however all destructured variables would be set undefined.

const { x, y, width, height } = refComp?.getBoundingClientRect() || {};

Below code assigns a default value to destructured variables.

const { x = 0, y = 0, width = 0, height = 0 } = refComp?.getBoundingClientRect() || {};