CODEWITHSUNDEEP
javascripthtmlcssreactjs
Giedrius
Giedrius

Reputation: 613

How to get returned div's offset/position in react?

In my code return i have: 

return (
  <div  className="pos__container" >
  <div  className="pos__container--line" ></div>
    {timeList}
  </div>
);

<div className="pos__container--line"> has margin-left:10%; other styles are irrelevant.

In the function under constructor I want to get its position.

To get the offset i need to get a div first.

I have tried: const element = ReactDOM.findDOMNode(this); which returns findDOMNode was called on an unmounted component. Also tried using document.QuerySelector(".pos__container--line"); which returns null

Feel like I'm out of the options.

Any suggestions how I could do this right or any other ways to do it ?

Any help would be appreciated.

Thanks in advance!

Upvotes: 1

Views: 10616

Answers (2)

KRISHNA PATEL
KRISHNA PATEL

Reputation: 135

You need to use the lifecycle method of React which is invoked when the component has mounted.

componentDidMount(){
  var node = ReactDOM.findDOMNode(this);
  console.log(window.getComputedStyle(node).offset);
}

Upvotes: 0

Dmitry Sokurenko
Dmitry Sokurenko

Reputation: 6132

First, you need to add a ref to the element you are interested in:

return (
  <div  className="pos__container" >
  <div  className="pos__container--line" ref={el => this.containerLine = el} ></div>
    {timeList}
  </div>
);

Then you can access that ref after the component was rendered:

componentDidMount() {
    // it is a regular DOM node
    this.containerLine.offsetTop
    // or with jquery
    $(this.containerLine).offset()
}

Upvotes: 3

Related Questions