MENU


Between Tags

You can also pass the function as a child to the component.


RESETRUNFULL
class Mouse extends React.Component {
   constructor(props) {
      super(props);
      this.handleMouseMove = this.handleMouseMove.bind(this);
      this.state = { x: 0, y: 0 }; }
   handleMouseMove(event) {
   this.setState({ x: event.clientX, y: event.clientY }); } render() {
   return ( <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}> {this.props.children(this.state)} </div>);
  }}class MouseTracker extends React.Component { render() {
      return (<div><h1>Move the mouse around!</h1>
        <Mouse>
        {mouse => (
           <p>The mouse position is {mouse.x}, {mouse.y}</p>)}
                          </Mouse> </div>);
  }}ReactDOM.render(<MouseTracker />, document.querySelector('div'));