Infinite loop through array of strings in React

Question

New to programming, and I'd really appreciate some help in rendering a React component. I have an array of strings, and I'd like to display each string in that array every 5 seconds on an infinite loop. The error I'm running into when trying to set the state is 'this.setState is not a function'. I'm inclined to think I'm using the wrong lifecycle method or there is a binding issue, but I'm lost. Below is the code. I'd really appreciate some help.

import React, {Component} from 'react';

class Home extends Component{
  constructor(props){
    super(props);
    this.state = {
      service: ''
    }
  }
  componentDidMount(){
    var services = ['Delivering professional and personalized care to your loved ones','Home visits with a personalized health plan', 'Transition Assistace', 'Advocacy and Guidance', 'Respite Care']
    let i=0;
    setInterval(function(){
      console.log('set interval working');
      const currentService = services[i];
      this.setState({
        service: currentService
      })
      i++;
      if(i>=services.length){
        i = 0;
      }
    }, 5000);
  }
  render(){
    console.log('this', this.state.service);
    return(
      <div className="home">
        <div className="profile-img"></div>
        <div className="mission">
          <div className="overlay">
            <p>{this.state.service}</p>
          </div>
        </div>
      </div>
    )
  }
}
export default Home;

Please make sure to accept the answer if it worked for you. Thanks! stackoverflow.com/help/accepted-answer — paqash
– paqash, Commented Mar 1, 2017 at 21:33

paqash · Accepted Answer · 2017-03-01 21:17:22Z

4

The this in your function in the setInterval isn't the this from ComponentWillMount .. that's why it fails. Do something like:

var that = this;

before you call setInterval and then

that.setState()

You can read more about the this keyword here.

answered Mar 1, 2017 at 21:17

paqash

2,3141 gold badge20 silver badges22 bronze badges

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

1 Comment

Alex Guerra Over a year ago

Alternatively, providing your target supports them, you could use an arrow function which has the same effect but is more idiomatic/concise in modern javascript. Considering it looks like you're using babel, this is the right way to go.

Collectives™ on Stack Overflow

Infinite loop through array of strings in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related