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 1400+ tech skills courses.