Recompose: Passing owner props to `renderComponent` via `branch`

[metamorfoso]

Hi there,

First of all, love the library, really enjoying working with a functional toolset in react.

This is not really an issue, but more of a question. Apologies if this isn't the right place, feel free to close/remove this.

My question is about using renderComponent within branch.

I have a component enhanced with several helper HOCs, including withState. I'm using withState to decide when a confirm component should be rendered, and to help build options that will be passed to it as props when it is to be rendered, like so:

const enhance = compose(
    withState('confirmShouldDisplay', 'setConfirmShouldDisplay', false),
    withState('confirmOptions', 'setConfirmOptions', null)
)

export default enhance(MyComponent)

Currently, I have a ternary inside MyComponent to decide whether or not to render the confirm component:

const MyComponent = (props) => {
    const { confirmShouldDisplay, confirmOptions } = props

    return (
        {
            confirmShouldDisplay
            ? <ConfirmComponent {...{confirmOptions}} />
            : <div>/*normal MyComponent jsx */</div>
    )
}

I would like to use the branch helper for this instead, as part of the MyComponent enhancer:

const enhance = compose(
    withState('confirmShouldDisplay', 'setConfirmShouldDisplay', false),
    withState('confirmOptions', 'setConfirmOptions', null),
    branch(
        (props) => props.confirmShouldDisplay,
        /* ConfirmComponentHOC */
    )
)

export default enhance(MyComponent)

It seems a common pattern to make something like ConfirmComponentHOC using therenderComponent helper.

However, I need to provide confirmOptions to ConfirmComponentHOC somehow, so I need to pass through owner props. As I understand it, renderComponent doesn't allow this.

So I need something like:

branch(
        (props) => props.confirmShouldDisplay,
        (props) => ConfirmComponentHOCWithOwnerProps
    )

If this is a common case, would you be able to share the common means of doing this? Or am I better off sticking with the ternary inside MyComponent?

This closed issue describes something similar, but appears to have been a case where branching didn't really need to happen: https://github.com/acdlite/recompose/issues/339

I'd really appreciate any advice on this.

Thanks!

[timkindberg]

Just make a small anonymous component to pass to branch.

renderComponent(({confirmOptions}) => <ConfirmComponent {...{confirmOptions}} />)

[metamorfoso]

Awesome, thank you very much!