import React from 'react';
import ReactDOM from 'react-dom';

class Mouse extends React.Component {
  state = {
    x: 0,
    y: 0,
  };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    })
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {this.props.children(this.state)}
      </div>
    )
  }
}

const App = React.createClass({
  render() {
    return (
      <Mouse>
        {(mouse) => (
          <div style={{ height: '100%' }}>
            <h1>The mouse position is ({mouse.x}, {mouse.y})</h1>
          </div>
        )}
      </Mouse>
    )
  }
});

ReactDOM.render(<App />, document.getElementById('root'));