How to get div or element height in ReactJS

Question

I am trying to get div element in reactJS but I am not able to achieve it . I need some expert to look into my code and resolve my issue or new code snippet would be appreciated .

Thanks

Code

    this.divElement = React.createRef()

    const height = this.divElement.clientHeight
    this.setState({ height })

     <div
      className="col-2-3"
      ref={(divElement) => {
      this.divElement = divElement
      }}
      >
     </div>

Does this answer your question? [ReactJS - Get Height of an element](https://stackoverflow.com/questions/35153599/reactjs-get-height-of-an-element) — Wais Kamal, Mar 19 '21 at 09:10
@WaisKamal no , actually I am following same as mentioned in comment but not able to find solution — React Guy, Mar 19 '21 at 09:21

score 1 · Answer 1 · answered Mar 19 '21 at 09:09

1

You should use the current property:

this.divElement = React.createRef()

const height = this.divElement.current.clientHeight
this.setState({ height })

 <div
  className="col-2-3"
  ref={this.divElement}
  >
 </div>

answered Mar 19 '21 at 09:09

Ramesh Reddy

10,159
3
17
32

TypeError: Cannot read property 'clientHeight' of null – React Guy Mar 19 '21 at 09:15
looks like you trying to get the height before the ref is populated try the same in componentDidMount – Ramesh Reddy Mar 19 '21 at 09:16
Yes, it in componentDidMount – React Guy Mar 19 '21 at 09:17

How to get div or element height in ReactJS

1 Answers1