CODEWITHSUNDEEP
node.jsreactjstypescriptjsx
migos
migos

Reputation: 86

My react component timer doesn't work

I want to use the Header Component as a Clock timer. I hope my page rendering per one sec. I followed some example in google search. But, couldn't find example like this. Why doesn't this tick() function work? There are no errors in the console.

This is my first code:

class index extends React.Component<Props, {}> {
constructor({ title }: Props) {
    super({ title });
}

render() {
    return (
        <Layout title={this.props.title}>
            <div className="header"><Header/></div>
            <div className="search-bar"><SearchBar/></div>
            <div className="Footer"><Footer/></div>
        </Layout>
    );
}
}

Second code:

class Header extends React.Component<{}, States>{
intervalID: any;
constructor() {
    super({}, {});
    this.state = {
        date: new Date().toLocaleString(),
    } 
    this.tick = this.tick.bind(this);
}

componentDidMount() {
    this.intervalID = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {
    clearInterval(this.intervalID);
}

tick() {
    this.setState({
        date: new Date().toLocaleString(),
    })
}

render() {
    return (
        <header>
            <p>Header: {this.state.date}</p>
        </header>
    );
}
}

export default Header;

This code (Node.js router) calls First page. App uses 'express-react-view' for its view engine.

import { Request, Response }  from "express";

/**
* Get /
* Home page.
* @param req 
* @param res 
*/
export let index = (req: Request, res: Response) => {
   res.render("index", {"title": "React, Front-end"})
};

Upvotes: 0

Views: 283

Answers (1)

Squiggle
Squiggle

Reputation: 2597

You're doing server-side rendering (that's what express-react-view does), which means the lifecycle hooks of your React components will not be called.

Thus, the interval trigger on componentDidMount() won't be called. This article has a good explanation for why this is.

Upvotes: 1

Related Questions