The term \u201crender prop\u201d 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.<\/p>\n
<DataProvider render={data => (<\/p>\n
<h1>Hello {data.target}<\/h1><\/p>\n
)}\/><\/p>\n
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.”<\/p>\n
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:<\/p>\n
class BaseComponent extends Component {<\/p>\n
render() {<\/p>\n
return <Fragment>{this.props.render()}<\/Fragment>;<\/p>\n
}<\/p>\n
}<\/p>\n","protected":false},"excerpt":{"rendered":"
The term \u201crender prop\u201d 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…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8582],"class_list":["post-74317","page","type-page","status-publish","hentry","category-reactjs","tag-render-props"],"acf":[],"yoast_head":"\n