Render Props
Learn how you can apply a technique for sharing code between React components using a prop whose value is a function.
We'll cover the following
What are render props?
But wait, what are render props and how do they differ from Function as a child components?
Simply put, they differ in the name of the prop. Some popular libraries eventually started using render
as a name for a prop that expects functions as their values. In our CryptoPrices
component (that we discussed previously), we would then use render
instead of children
:
<CryptoPrices limit={5} render={(props) => <PriceTable {...props} />} />
Within the CryptoPrices
component, we can write:
render() {
const { isLoading, items } = this.state;
const { render } = this.props;
if (typeof render !== "function") {
return null;
}
// Careful: render() does not have anything to do with the component with
// the same name and gets injected via this.props.render
return render({
isLoading,
items,
loadData: this.loadData
});
}
Code Example
Let’s see this in action.
Get hands-on with 1200+ tech skills courses.