React HOCs and "Render Props" ... Note: If we're going to call it the "render prop" pattern, can we stop using props.children as the function?

render-props.jsx

// higher order component creator
const withFun = (Component) => (props) => <Component {...props} fun='Injected Secret Value' />

// using the higher order component (with this pattern, you have to create a component, THEN wrap it in the HOC creator function)
const _MyComponent = (props) => <div><h1>{props.fun}</h1></div>
const MyComponent = withFun(_MyComponent)



// "render prop" using children
const FunChildren = ({ children }) => children({ fun: 'Injected Secret Value' })

// using render prop as children ... why is this called "render prop" you might ask??
const MyComponent = (props) => (
  <div>
    <FunChildren>
      {({ fun }) => <h1>{fun}</h1>}
    </FunChildren>
  </div>
)



// "render prop" ... as a prop called render
const FunRenderProp = ({ render }) => render({ fun: 'Injected Secret Value' })

// using render prop ... ah THIS makes sense to be called "render prop"
const MyComponent = (props) => (
  <div>
    <FunRenderProp render={({ fun }) => <h1>{fun}</h1>} />
  </div>
)