Component.jsx

import React from 'react';
import MapBox from './Map.jsx';

var Component = React.createClass({
  getInitialState: function() {
    return {
      data: {
        x: 0,
        y: 0
      }
    }
  },
  handleChange(data) {
    this.setState({data: data});
  },
  render: function () {
    return (
      <div className='container'>
        <MapBox onChange={this.handleChange} />
        <h3>{this.state.data.x} {this.state.data.y}</h3>
      </div>
    );
  },
  propTypes: {
  }
});

export default Component;

MapBox.jsx

var MapBox = React.createClass({

  getPosition: function(ev) {
    var x = ev.clientX;
    var y = ev.clientY;
    var rect = ev.target.getBoundingClientRect();
    x = x - rect.left
    y = y - rect.top

    this.props.onChange({x: x, y: y});
  },
  render: function () {
    return (
      <canvas height='755' width='900' onClick={this.getPosition}></canvas>
    );
  }
});