score:6

Accepted answer

yes the problem is the settimeout inside the settimeout function "this" refer to the function itself: so the solution is the typical var that = this :

navopen() {
this.setstate({
    navstatus: "navshow",
    navlinesshow: false
});
if ( this.state.visible === false) {
 var that = this;
    settimeout(function (){
        that.setstate({
            visible: true
         });
    }, 3000);
}

score:2

another solution in addition to @pinturic's solution is to use es6 arrow functions. if you're using es6/babel, etc., you can use an arrow function to bind to the lexical this.

navopen() {
    this.setstate({
        navstatus: "navshow",
        navlinesshow: false
    });
    if (!this.state.visible) {
        settimeout(() => this.setstate({visible: true}), 3000);
    }
}

score:3

it is because this doesn't have the correct value due to runtime binding. you need to use lexical binding. the best solution is to use es6 arrow functions () => {} which provides lexical binding of this value. even with the settimeout() the lexical binding of this would fix the error you are getting

constructor() {
    super();

    this.state = {
        visible: false,
        navlinesshow: true
    };
}

navopen = () => {
    this.setstate({
        navstatus: "navshow",
        navlinesshow: false
    });

    if ( this.state.visible === false) {
        settimeout(() => {
            this.setstate({
                visible: true
             });
        }, 3000);
    }
}

Related Query

More Query from same tag