Interview question

What are Render Props? Render Props क्या हैं?

Q: What are Render Props?

// Render Props - share logic through render function class MouseTracker extends React.Component { state = { x: 0, y: 0 }; handleMouseMove = (e) => { this.setState({ x: e.clientX, y: e.clientY }); } render() { return ( <div onMouseMove={this.handleMouseMove}> {this.props.render(this.state)} </div> ); } } // Using Render Props <MouseTracker render={({ x, y }) => ( <p>Mouse position: {x}, {y}</p> )} />

Answer

// Render Props - share logic through render function
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };
  
  handleMouseMove = (e) => {
    this.setState({ x: e.clientX, y: e.clientY });
  }
  
  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// Using Render Props
<MouseTracker
  render={({ x, y }) => (
    <p>Mouse position: {x}, {y}</p>
  )}
/>

Render Props pattern:
<Component
  render={(data) => <div>{data}</div>}
/>

Was this answer clear?

Subjects

Related questions