I have the following React component:
import React from 'react';
import PropTypes from 'prop-types';
import Timer from '../Timer';
import moment from 'moment';
require('moment-countdown');
class PageThreeInfoSection extends React.Component {
constructor(props) {
super(props);
this.state = {
date: this.getDate(),
};
this.getDate = this.getDate.bind(this);
}
getDate() {
return moment().countdown("2018-02-22").toString();
}
componentWillMount() {
this.interval = setInterval(() => {
this.setState({
date: this.getDate(),
});
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
const { date, } = this.state;
const { joinedFriendNumber, } = this.props;
return (
<div className="mt-4 mb-5 mt-sm-0 mb-sm-0">
<h5 id="scroll-title" className="col-24 text-uppercase text-dark mt-4 mb-2 p-0 px-sm-3">
{joinedFriendNumber} Friends Have Joined So Far
</h5>
<div className="col-24 text-light smallest mb-2">
Your friends need to confirm their email to get your points
</div>
<div className='timer-container'>
<Timer time={date} />
</div>
</div>
);
}
}
PageThreeInfoSection.propTypes = {
joinedFriendNumber: PropTypes.number,
};
PageThreeInfoSection.defaultProps = {
joinedFriendNumber: 0,
};
export default PageThreeInfoSection;
And the Timer component:
import React from 'react';
import * as PropTypes from 'prop-types';
const Timer = ({ time, }) => (
<span className='timer'>
{time}
</span>
);
Timer.propTypes = {
time: PropTypes.string,
};
export default Timer;
I'm attempting to update the timer component with a new time each second. So the DOM updates in real-time. Trouble is, this.setState()
doesn't seem to actually update the state and cause the render function to update.
I'm using server side rendering which means componentDidMount doesn't seem to work at all, it doesn't even get triggered.