Ball.js

Ball.js

import React from 'react'

export default class extends React.Component {
	state = {
		positionY: 0
	}

	static displayName = 'Ball'

	moveDown = () => this.setState(({ positionY }) => ({ positionY: positionY + 2 }))

	componentDidMount() {
		this.interval = setInterval(() => this.moveDown(), 500);
	}

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

	componentDidUpdate(nextProps, nextState) {
		const position = this.ball.getBoundingClientRect()

		if (position.y === this.props.containerHeight) {
			this.props.decrement()
			clearInterval(this.interval)
		}
	}

	render () {
		const { onClick } = this.props

		return (
			<div ref={x => this.ball = x} onClick={onClick} style={{ transform: translateY(${this.state.positionY}px) }} className='Ball' /> 
		)
	}
}