getting mouse coordinates in React and jQuery

As others have mentioned, the issue is that react has not rendered your component to the DOM when jQuery tries to attach the event listener.

You don’t need jQuery to do this at all, a better approach is to use the React events:

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.state = { x: 0, y: 0 };
  }

  _onMouseMove(e) {
    this.setState({ x: e.screenX, y: e.screenY });
  }

  render() {
    const { x, y } = this.state;
    return <div onMouseMove={this._onMouseMove.bind(this)}>
      <h1>Mouse coordinates: { x } { y }</h1>
    </div>;
  }
}

Example pen: https://codepen.io/CarlosEME/pen/XWWpVMp

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)