Changing states using setTimeout continuously in reactjs

Question

I'm trying to change the states in a loop using setTimeout method. I have declared a default state in my constructor like this

constructor(){
        super();

        this.state = {

            postType:'star_rating'

        }

    }

I want to change the state in 5 seconds which i was able to achieve like this

setTimeout(() => {
            this.setState({
                postType: 'image_poll'
            });
        }, 5000);

The problem is after another 5 seconds it should change it to another state. And after another 5 seconds the state change should be repeated from the beginning. So in conclusion the state should change like this

A -> B -> C -> A -> B -> C -> A -> B -> C ....... continuously this should happen. How can i do this?

If you need to repeatedly perform an action then consider setInterval developer.mozilla.org/en-US/docs/Web/API/…. You can read the current state to decide what to transition to on each interval. — John
– John, Commented Oct 31, 2017 at 10:54
const states = ['image_poll','star_rating','whatever']; this.currentState = 0; setInterval(() => { this.setState({ if (this.currentState>2) { this.currentState=0; } this.setState({ postType: states[currentState] }) },5000); — mplungjan
– mplungjan, Commented Oct 31, 2017 at 11:01

Héctor Valls · Accepted Answer · 2017-10-31 10:57:16Z

1

That's just a simple state machine. This is one possible implementation:

setTimeout(() => {
    this.setState(getNextState());
}, 5000);

and

getNextState() {
  if (this.state.postType === 'star_rating') 
    return { postType: 'image_poll' };
  if (this.state.postType === 'image_poll')
    return { postType: 'third_state' };
  return { postType: 'star_rating' };
}

answered Oct 31, 2017 at 10:57

Héctor Valls

26.4k43 gold badges153 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing states using setTimeout continuously in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related