> For the complete documentation index, see [llms.txt](https://ricardomol.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ricardomol.gitbook.io/notes/frontend/react/patterns/render-props.md).

# Render props

## **Render props**

A way for us to create a component that provides some kind of data to a child component.

## Why would we want that?

You have **reusable functionality** and you most likely want **to abstract that away into a function or a component (**we’re gonna opt for the latter).

## Use cases

* **Fetching data.** Have a component that abstracts away all of the mess of HTTP and just serves you the data when it’s done.
* **A/B testing.** You want to be able to conditionally decide whether something is visible or not.

## **Example**:

```jsx
const ProductDetail = ({ product }) => ( 
  <React.Fragment> 
    <h2>{product.title}</h2> 
    <div>{product.description}</div> 
  </React.Fragment> ) 

<Fetch url="some url where my data is" 
  render={(data) => <ProductDetail product={data.product} /> }
/>
```

We have 2 different components:

1. `ProductDetail` just looks like a presentation component
2. `Fetch` has a property url on it and it seems like it has a render property that ends up rendering our `ProductDetail`.