How to setInterval in React with Typescript

Question

I'm trying to render a dynamic progress bar in react/typescript. I was able to do this in react but converting this into typescript gives me;

[ts] Property 'setInterval' does not exist on type 'Jockey'. any

with a warning underline on setInterval call inside componentDidMount.

With react only I used this.interval = setInterval(this.timer, this.state.interval); inside componentDidMountand it worked but with typescript's strict typing I'm not sure how to do this.

Jockey.tsx

import * as React from 'react';

interface Props {
    color: string;
    avatar: string;
}

interface State {
    interval: number;
    progress: number;
}

export class Jockey extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
        this.state = {
          interval: Math.floor(Math.random() * 500),
          progress: 0,
        };
    }

    componentDidMount () {
        this.setInterval(this.timer, this.state.interval);
    }

    timer () {
        this.setState({ progress: this.state.progress + 1 });
        console.log('anyhting');
        
        (this.state.progress >= 99) ? this.setState({ progress: 100 }) : this.setState({ progress: 0 }) ;
    }

    render() {
        return (
            <div>
                <div className="App-lane">
                    {/* <img src={ this.props.avatar } alt=""/> */}
                    <progress value={this.state.progress} color={this.props.color} max="100" />
                </div>
            </div>
        );
    }
}

setInterval is a method of global window object not any custom class — Niladri
– Niladri, Commented Feb 22, 2018 at 7:54
Doesn't look like I'm using this.setState correctly in timer(). I seem to have issues setting the progress. — colin_dev256
– colin_dev256, Commented Feb 22, 2018 at 8:08

Arman Charan · Accepted Answer · 2018-02-22 08:04:52Z

2

this.setInterval() doesn't exist.

I assume you're trying to create an interval and save a reference so that you can clear it later.

See below for a rough example of how one might achieve this.

Set Interval

componentDidMount () {
  this.interval = setInterval(this.timer, this.state.interval)
}

Clear Interval

componentWillUnmount() {
  clearInterval(this.interval)
}

Further Reading

See the setInterval() references in React Docs: State and Lifecycle for more info.

All the best ✌️

edited Feb 22, 2018 at 8:04

answered Feb 22, 2018 at 7:56

Arman Charan

5,8292 gold badges26 silver badges36 bronze badges

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

2 Comments

colin_dev256 Over a year ago

This does not work if I use this.interval = setInterval(this.timer, this.state.interval). Works if I take away this as in the comments above. Doesn't look like I'm using this.setState correctly in timer() either. I seem to have issues setting the progress. Remember I'm using typescript

Arman Charan Over a year ago

timer() doesn't appear to be bound to this. You could redeclare or call it using an Arrow Function. Otherwise refer to this article.

Collectives™ on Stack Overflow

How to setInterval in React with Typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related