CODEWITHSUNDEEP
reactjstypescript
JillAndMe
JillAndMe

Reputation: 4571

Can't get ref.current.offsetWidth

I've trying to make contextMenu.

I want to get offsetWidth and offsetHeight from ref.current, but console.log prints undefined.

const ContextMenu: React.FC<ContextMenuProps> = props => {
  const thisComponent = useRef(null);
  const [isVisible, setIsVisible] = useState<boolean>(false);
  let thisComponentHeight = null;
  let thisComponentWidth = null;

  useEffect(() => {
    document.addEventListener("contextmenu", contextMenuHandler);
    if (thisComponent && thisComponent.current) {
      thisComponentWidth = thisComponent.current;
      thisComponentHeight = thisComponent.current;
      console.log(thisComponent.current)
    }
  }, []);

  return (
    <Column ref={thisComponent}>
      <div>test</div>
      <div>test2</div>
    </Column>
  );
};

export default ContextMenu;

This is the picture of console.log(thisComponent.current);

enter image description here

Upvotes: 0

Views: 5137

Answers (1)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15698

That Column component looks like it belongs to another library, not something native to React, so they might have defined their own set of properties in the current object. Just wrap the Column in a div or span, then give that markup the ref. you will be able to get the offsetWidth as well as the native DOM properties.

  return (
    <div ref={thisComponent}>
      <Column>
        <div>test</div>
        <div>test2</div>
      </Column>
    </div>
  );

Upvotes: 2

Related Questions