render-prop-with-children.jsx

// pass the children back to the component to be used
// in the final render
const Enhancer = ({render, children, foo}) => (
  <div>{render(foo * 2, children)}</div>
)

// ViewComp uses both `render` & `children` 🙃
const ViewComp = () => (
  <Enhancer foo={11} render={(value, children) => (<div>{value} - <span>{children}</span></div>)}>
    Here's some children content
  </Enhancer>
)