Render Props – An Advanced React Pattern

Introduction

Hi, folks. Render props which is one of the hottest topics in react community. We will also build a reusable listing component to see Render Props in action.

For a live working example check out this stack blitz repo.

What are render props?

A render prop is a prop on a component, which value is a function that returns a JSX element. The component itself does not render anything besides the render prop. Instead, the component simply calls the render prop, instead of implementing its own rendering logic.

In simple words, render props are simply props of a component where you can pass functions. These functions need to return elements, which will be used in rendering the components.

---

Understand the problem

Let's consider having a listing component that lists the user data or some product details. The general implementation of components looks like below.

import * as React from 'react';

const ListingComponent = ({ data, headingText = 'Heading' }) => {

  return (
    <>
      <h3>{headingText}</h3>
      <ul>
        {data.map((item, index) => {
          return (
            <li key={index}>
              {item.tittle} price {item.price}
            </li>
          );
        })}
      </ul>
    </>
  );
};

export default function App() {
  const data = [
    {
      id: 1,
      tittle: 'Onion',
      price: 5,
    },
    {
      id: 2,
      tittle: 'Tomato',
      price: 50,
    },
  ];

  return (
    <div>
      <ListingComponent data={data} />
     </div>
  );
}

Now, you can see the ListingComponent is tightly coupled with data passed to it. Now we can't reuse the component for some other data. If you watched carefully you can find that rendering the list is a only dynamic part.

<ul>
    {data.map((item, index) => {
        return (
            <li key={index}>
              {item.tittle} price {item.price}
            </li>
         );
      })}
 </ul>

Let’s understand render props in depth

Let's dive into the depth of understanding of render props. As we understood from the above problem except for the rendering logic every other parts are same.

A render prop is simply a function prop that is called in a render method.

So we are going to build our reusable List component using a powerful react render prop pattern.

const ReuseableListingComponent = ({
  data,
  headingText = 'Reuseable Listing Component',
  render,
}) => {
  return (
    <>
      <h3>{headingText}</h3>
      <ul>{data.map(render)}</ul>
    </>
  );
};

As now you can see we are passing a prop called render & passing that to a map in JSX other than that everything is the same as before.

Now you may get a question about what to pass on that render prop? Let's dive into it.

What is that Render prop?

A render prop is nothing simply a function prop that is called in a render method. As we know map function gives a callback for each item in the passed array. so, in a reader prop, we are going to pass a callback function that renders the actually rendered logic.

It may sound a bit confusing. Let's look at a code implementation for better understanding.

<ReuseableListingComponent
   data={data}
   render={(item, index) => {
      return (
        <li key={index}>
          {item.tittle} price {item.price}
        </li>
       );
    }}
  />

I hope now it makes sense & better understanding. Let's see ReuseableListingComponent in action.

Render prop in action

import * as React from 'react';


const ListingComponent = ({ data, headingText = 'Heading' }) => {
  return (
    <>
      <h3>{headingText}</h3>
      <ul>
        {data.map((item, index) => {
          return (
            <li key={index}>
              {item.tittle} price {item.price}
            </li>
          );
        })}
      </ul>
    </>
  );
};

const ReuseableListingComponent = ({
  data,
  headingText = 'Reuseable Listing Component',
  render,
}) => {
  return (
    <>
      <h3>{headingText}</h3>
      <ul>{data.map(render)}</ul>
    </>
  );
};

export default function App() {
  const data = [
    {
      id: 1,
      tittle: 'Onion',
      price: 5,
    },
    {
      id: 2,
      tittle: 'Tomato',
      price: 50,
    },
  ];

  const contactData = [
    {
      id: 1,
      name: 'Zero code',
      email: 'admin@zerocode.com',
    },
    {
      id: 2,
      name: 'Zero code Manager',
      email: 'manager@zerocode.com',
    },
  ];

  return (
    <div>
      <ListingComponent data={data} />
      <ReuseableListingComponent
        data={contactData}
        render={(item, index) => {
          return (
            <li key={index}>
              {item.name} mail {item.email}
            </li>
          );
        }}
      />

      <ReuseableListingComponent
        data={data}
        render={(item, index) => {
          return (
            <li key={index}>
              {item.tittle} price {item.price}
            </li>
          );
        }}
      />
    </div>
  );
}

As you can see now a ReuseableListingComponent can render different data passed to it. That's it we can use this technique to build a highly re-useable component.

Conclusion

We learned how Render Props helped us to create a more reusable component. I hope you got valuable information today. For more content like this like & share in your communities.