Breaking News: Grepper is joining You.com. Read the official announcement!

react render prop

Lovely Lizard answered on April 18, 2022 Popularity 10/10 Helpfulness 2/10

answer react render prop

related react render prop

react render prop

Comment

// The <Mouse> component encapsulates the behavior we need...
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}>

        {/* ...but how do we render something other than a <p>? */}
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <>
        <h1>Move the mouse around!</h1>
        <Mouse />
      </>
    );
  }
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: reactjs.org

Tags: javascript prop render

Link to this answer
Share Copy Link

Contributed on Apr 18 2022

Lovely Lizard

0 Answers Avg Quality 2/10

Closely Related Answers

react render prop

Comment

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: reactjs.org

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 18 2022

Lovely Lizard

0 Answers Avg Quality 2/10

react render prop

Contents

More Related Answers

react render prop

Closely Related Answers

react render prop

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.