import React from 'react'
class NumberCounter extends React.Component {
handle = null
state = {
current: 0,
}
incrementAmount = 1
componentDidMount() {
this.incrementAmount = this.props.target / 60
this.handleCount()
}
componentWillUnmount() {
this.setState({current: 0})
clearInterval(this.handle)
}
componentWillReceiveProps(nextProps) {
if(nextProps.target !== this.props.target) {
this.setState({ current: 0 }, () => {
this.handleCount()
})
}
}
handleCount() {
this.handle = setInterval(() => {
let current = this.state.current
const target = this.props.target
if(current < target) {
current += this.incrementAmount
this.setState({ current: Math.floor(current) })
}
else {
this.setState({ current: target })
clearInterval(this.handle)
}
}, 1);
}
render() {
const {
current,
} = this.state
const {
text,
target,
} = this.props
return (
<div className="NumberCounter">
<div className="number">{current}</div>
<div className="text">{text}</div>
</div>
)
}
}
export default NumberCounter
Comments