CODEWITHSUNDEEP
react-native
Mathew
Mathew

Reputation: 1450

react-native window.setInterval, trying to display an incrimenting number

I want to display a number that increases once every second, rather than using some kind of time function I am using window.setInterval because eventually I will replace this with some more complicated code that instead of just displaying the number calls some function and displays the result. Here is the code I have right now:

export default class Test extends Component {
    constructor(props){
        super(props)
        this.state = {counter:0}
    }

    render(){
        newCounter = this.state.counter+1 // I am going to replace this
                                          // with something like:
                                          // newCounter = someFunc()
        func = this.setState

        window.setInterval(function(){
            func({counter:newCounter})
        },1000);

        return(
            <View>
                <Text>{this.state.counter}</Text>
            </View>
        )
    }
}

It gives me this error: undefined is not an object (evaluating 'this.updater')

how can I do this correctly? Thanks

Upvotes: 1

Views: 347

Answers (1)

Jordan Daniels
Jordan Daniels

Reputation: 5304

Try this: 

export default class Test extends Component {
  constructor(props){
    super(props)
    this.state = {counter:0}
  }

  componentDidMount(){
    setInterval(() => {
        this.setState( prevState => ({counter: prevState.counter + 1}));
    },1000);
  }

  render(){
    return(
        <View>
            <Text>{this.state.counter}</Text>
        </View>
    )
  }
}

Basically, you want to use the function arrow with set Interval, to not lose the context of the this keyword, and try to use set State outside of the render method.

Here is a demo as well: https://snack.expo.io/HkikISZMm

Upvotes: 1

Related Questions