<main></main>
function withTimer(Component) {
return class WithTimer extends React.Component {
constructor(props) {
super(props);
this.state = { ticks: 0 };
}
componentDidMount() {
this.clock = setInterval(() => {
this.setState(state => ({ ticks: state.ticks + 1 }));
}, 1000);
}
componentWillUnmount() {
clearInterval(this.clock);
}
render() {
return (
<Component ticks={this.state.ticks} />
)
}
}
}
const App = withTimer(React.createClass({
render() {
return (
<div>
<p>Hello World {this.props.ticks} </p>
</div>
);
}
}));
ReactDOM.render(<App />, document.querySelector('main'));
View Compiled
This Pen doesn't use any external CSS resources.