Render props

Source: https://dev.to/softchris/the-amazing-render-props-pattern-for-reactjslifecycle-begone-34k1

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:

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.