I am new to ReactJS and I am having an error "this.setState is not a function".

constructor() {
    super();

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

    this.navOpen = this.navOpen.bind(this)

}

navOpen() {
    this.setState({
        navStatus: "navShow",
        navLinesShow: false
    });

    if ( this.state.visible === false) {

        setTimeout(function (){

            this.setState({
                visible: true
             });

        }, 3000);

    }

I have added this.navOpen = this.navOpen.bind(this) to the contructor. So I guess the problem is with setTimeout function.

What is a possible fix?

Thank You.

I am new to ReactJS and I am having an error "this.setState is not a function".

constructor() {
    super();

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

    this.navOpen = this.navOpen.bind(this)

}

navOpen() {
    this.setState({
        navStatus: "navShow",
        navLinesShow: false
    });

    if ( this.state.visible === false) {

        setTimeout(function (){

            this.setState({
                visible: true
             });

        }, 3000);

    }

I have added this.navOpen = this.navOpen.bind(this) to the contructor. So I guess the problem is with setTimeout function.

What is a possible fix?

Thank You.

• javascript
• reactjs
• setstate

Share Improve this question Follow asked Jun 30, 2016 at 13:15 xoomerxoomer 32122 gold badges1111 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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);
}

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);
    }
}

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);
    }
}