What is the render props pattern? The render props pattern is a technique for sharing code between components using a prop whose value is a function (a “render prop”). This function can return JSX or other values,

llowing more dynamic behavior and custom rendering.

• Purpose: It enables a component to expose its logic while letting its consumers

define how the output is rendered.

Example:

class MouseTracker extends React.Component {
state = { x: 0, y: 0 };

handleMouseMove = (event) => {

this.setState({

x: event.clientX,

y: event.clientY,

});

};

render() {

return (

<div onMouseMove={this.handleMouseMove}>

{this.props.render(this.state)}

</div>

);

}
}

const App = () => (

<MouseTracker render={({ x, y }) => (

<h1>The mouse position is ({x}, {y})</h1>

)} />

);

In this example, MouseTracker uses the render prop pattern to allow the parent

component to decide how to render the mouse position data.