c.getBoundingClientRect is not a function

Question

I'm using a semantic visibility but I have this error I don't know what I'll pass to my function parameter

could someone help me how could i fix this?

const handleOverlayRef = (c) => {
  console.log(c);
  if (!overlayRect) {
    setOverlayRect({ overlayRect: _.pick(c.getBoundingClientRect(), 'height', 'width') })
  }
}
      <Visibility
        offset={80}
        once={false}
        onTopPassed={()=> stickOverlay()}
        onTopVisible={()=>unStickOverlay()}
        style={overlayFixed ? { ...overlayStyle, ...overlayRect } : {}}
      />

      <div ref={() => handleOverlayRef()} style={overlayFixed ? fixedOverlayStyle : overlayStyle}>
        <Menu
          icon='labeled'
          style={overlayFixed ? fixedOverlayMenuStyle : overlayMenuStyle}
          vertical
        >
          <Menu.Item>
            <Icon name='twitter' />
            Twitter
          </Menu.Item>

          <Menu.Item>
            <Icon name='facebook' />
            Share
          </Menu.Item>

          <Menu.Item>
            <Icon name='mail' />
            Email
          </Menu.Item>
        </Menu>
      </div>

error:

TypeError: c.getBoundingClientRect is not a function

Seee https://stackoverflow.com/questions/51963089/react-element-getboundingclientrect-is-not-a-function — B. Go, Dec 13 '19 at 20:43

score 1 · Accepted Answer · answered Dec 13 '19 at 23:56

1

When we work with ref we should declare it first, like so:

    function Component = props => { 
           const myRef = React.useRef(); 

        const myMethod = event => {
           const {height, width, x, y} = myRef.current.getBoundingClientRect();
           console.log(height, width, x, y);
         }

        return (
       <div ref={myRef} style={overlayFixed ? fixedOverlayStyle : overlayStyle}>


       </div>
     )
 }

answered Dec 13 '19 at 23:56

Gaspar Teixeira

1,237
11
21

oops i did that but i'm a little confused how i will call my method – Spirit Yang Dec 14 '19 at 00:02
React.useEffect(() => { // code to run on component mount myMethod(); }, []) – Gaspar Teixeira Dec 14 '19 at 00:18
Should I set myref to every time it changes perform this function or execute only once? – Spirit Yang Dec 14 '19 at 00:24
it will execute once. Only when your component mount. If you need that to change you have to use React.useState – Gaspar Teixeira Dec 14 '19 at 01:11

Albert Belotti · Answer 2 · 2019-12-13T23:41:06.790

0

Please try to use this.

<div ref={handleOverlayRef} style={overlayFixed ? fixedOverlayStyle : overlayStyle}>

const handleOverlayRef = (c) => {
  console.log(c);
  if (!overlayRect && c) {
    setOverlayRect({ overlayRect: _.pick(c.getBoundingClientRect(), 'height', 'width') })
  }
}

edited Dec 13 '19 at 23:41

answered Dec 13 '19 at 20:53

Albert Belotti

56
3

i try buy samee :( – Spirit Yang Dec 13 '19 at 22:19
please share your console.log result. – Albert Belotti Dec 13 '19 at 22:20
Twitter
Share
Email
– Spirit Yang Dec 13 '19 at 22:49
and after i got one null – Spirit Yang Dec 13 '19 at 22:49
i got this div and null – Spirit Yang Dec 13 '19 at 22:49
Okay please add exception. – Albert Belotti Dec 13 '19 at 23:40
Hello I think the problem is the other remained the same error my console.log appears my div – Spirit Yang Dec 13 '19 at 23:48

c.getBoundingClientRect is not a function

2 Answers2