Render Prop: Using Props Other Than render

Using Props Other Than render

<Mouse children={mouse => (
  <p>The mouse position is {mouse.x}, {mouse.y}</p>
)}/>

//or

<Mouse>
  {mouse => (
    <p>The mouse position is {mouse.x}, {mouse.y}</p>
  )}
</Mouse>

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.

Any prop that is a function that a component uses to know what to render is technically a “render prop”.

Related concepts

Using Props Other Than render

Render Prop: Using Props Other Than render — Structure map

Clickable & Draggable!

Render Prop: Using Props Other Than render — Related pages: