Render Props

Render Props

 

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

 

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

 

<DataProvider render={data => (

  <h1>Hello {data.target}</h1>

)}/>

 

Note:

 

It’s important to remember that just because the pattern is called “render props” you don’t have to use a prop named render to use this pattern. In fact, any prop that is a function that a component uses to know what to render is technically a “render prop”.

 

Using Props Other Than render

 

Although the examples above use render, we could just as easily use the children prop!

 

<Mouse children={mouse => (

  <p>The mouse position is {mouse.x}, {mouse.y}</p>

)}/>

 

Since this technique is a little unusual, you’ll probably want to explicitly state that children should be a function in your propTypes when designing an API like this.

 

Mouse.propTypes = {

  children: PropTypes.func.isRequired

};