Explain the concept and usage of render props in React.
Instruction: Describe what render props are, their benefits, and provide an example of how they can be used in React.
Updated
Official answer available
Read the opening below, then unlock the full answer and practical guidance.
A render prop is a function supplied as a prop that a component calls to obtain UI. The component can own reusable behavior while its caller decides how to display the resulting data. The prop may be named render, children or something else by agreement.
import { Component } from 'react'; export class MouseTracker extends Component { state = { x: 0, y: 0 }; handleMouseMove = event => { this.setState({ x: event.clientX, y: event.clientY }); }; componentDidMount() { window.addEventListener('mousemove', this.handleMouseMove); }...