componentDidMount to get DOM node got error

Question

I got error of TypeError: Cannot read property 'offsetHeight' of undefined when trying to get offsetHeight of a dom node.

componentDidMount() {
        setTimeout(function(){
            console.log(this.contentBody.offsetHeight)
        },1000)
    }

I suspect this is caused my async where the ref is not yet set. My render method look like this

<div ref={elem => this.contentBody = elem} className="content-body" dangerouslySetInnerHTML={createMarkupFromReferenceContent()} />

I tried to create a non ajax demo here https://codesandbox.io/s/j46o2656vy and it worked. That's why I try the setTimeout hack above, but no luck. Any clue how to solve this?

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Mayank Shukla, Sep 01 '17 at 09:58

score 0 · Answer 1 · answered Sep 01 '17 at 10:05

0

You have to bind this to setTimeout callback function. Like this:

componentDidMount() {
        setTimeout(function(){
            console.log(this.contentBody.offsetHeight)
        },1000).bind(this);
    }

answered Sep 01 '17 at 10:05

Yash Kochar

461
6
15

score 0 · Answer 2 · answered Sep 01 '17 at 10:06

this reffers to the closest scope, so when you use it with a callback function this points to the callback function and not your object.

In EcmaScript2015 this can be fixed by using an arrow function:

componentDidMount() {
    setTimeout(()=>{
        console.log(this.contentBody.offsetHeight)
    },1000)
}

But this syntax is not supported in the old browsers (IE in particular)

But if you need cross-browser support just use a variable:

componentDidMount() {
    var self = this;
    setTimeout(function(){
        console.log(self.contentBody.offsetHeight);
    },1000)
}

componentDidMount to get DOM node got error

2 Answers2