this.setState is not a function while I am trying to set a different state

Question

I want to change the value of currentIndex every 5s but when it comes to this.setState I receive Uncaught TypeError: this.setState is not a function

Here is my code:

constructor() {
        super()
        this.state = {
            currentIndex: 0,
       }
    }

    componentDidMount() {
        this.changeIndex()
    }

    changeIndex() {
        const { currentIndex } = this.state
        setInterval(function () {
            if (currentIndex < 2) {
                this.setState({ currentIndex: currentIndex + 1 })
            } else {
                this.setState({ currentIndex: 0 })
            }
        }, 5000);
    }

because you are wrapping that in `setInterval`, whats the reason for the delay? — Rikin, Sep 24 '19 at 19:02
Also `this.setState({ currentIndex: currentIndex + 1 })` I am almost sure doesn't do what you expect it to do. If you need to update state based on the current state use callback `this.setState(currentState => ({ /* correct state here */}))` — Yury Tarabanko, Sep 24 '19 at 19:08

score 1 · Answer 1 · answered Sep 24 '19 at 19:05

use arrow functions:

changeIndex = () =>{
            const { currentIndex } = this.state
            setInterval( ()=> {
                if (currentIndex < 2) {
                    this.setState({ currentIndex: currentIndex + 1 })
                } else {
                    this.setState({ currentIndex: 0 })
                }
            }, 5000);
        }

score 1 · Accepted Answer · answered Sep 24 '19 at 19:05

1

Use arrow function :

 setInterval(() => {
        if (currentIndex < 2) {
            this.setState({ currentIndex: currentIndex + 1 })
        } else {
            this.setState({ currentIndex: 0 })
        }
    }, 5000);

answered Sep 24 '19 at 19:05

Oleg

2,915
1
4
8

this.setState is not a function while I am trying to set a different state

2 Answers2