Render Props

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

<DataProvider render={data => (

<h1>Hello {data.target}</h1>

)}/>

Libraries that use render props include React Router and Downshift. Using render props in React is a technique for efficiently re-using code. According to the React documentation, “a component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.”

In working with render props, you pass a render function to a component that, in turn, returns a React element. This render function is defined by another component, and the receiving component shares what is passed through the render function. This is what this looks like:

class BaseComponent extends Component {

render() {

return <Fragment>{this.props.render()}</Fragment>;

}

}