In React, render props are a great way to reuse component logic while customizing how things look.
Let’s say we have two arrays — one for products and one for companies:
const products = [...]; // list of product objects
const companies = [...]; // list of company objects
We want to render both in different ways, but reuse the same logic for listing and toggling visibility.
🧠 What Is a Render Prop?
A render prop is just a prop that takes a function. This function controls how each item is rendered.
<Component render={(item) => <div>{item.name}</div>} />
🔧 Reusable List Component
Here’s a simple List component using a render prop:
function List({ title, items, render }) {
const [isCollapsed, setIsCollapsed] = useState(false);
const displayItems = isCollapsed ? items.slice(0, 3) : items;
return (
<div>
<h2>{title}</h2>
<ul>{displayItems.map(render)}</ul>
<button onClick={() => setIsCollapsed(!isCollapsed)}>
{isCollapsed ? "Show All" : "Show Less"}
</button>
</div>
);
}
✅ Rendering Products
<List
title="Products"
items={products}
render={(product) => (
<li key={product.productName}>
{product.productName} - ${product.price}
</li>
)}
/>
✅ Rendering Companies
<List
title="Companies"
items={companies}
render={(company) => (
<li key={company.companyName}>
{company.companyName} — {company.phrase}
</li>
)}
/>
🎯 Why Use Render Props?
- Write once, use anywhere
- Clean separation of logic and UI
- Highly reusable components
That’s it! One component. Two uses. Clean, simple, and powerful.
💬 Found this helpful? Drop a ❤️ or leave a comment!
Top comments (0)