How to pass a child function to a component

[SalomonBrys]

I'm trying to use an external component that I have imported as such:

@file:JsModule("react-transition-group")
package react_transition_group

import react.RClass

external val Transition : RClass<dynamic>

This component expects a function child (see its doc here: http://reactcommunity.org/react-transition-group/transition).

So, I can use it, but how do I give it a child function?

Transition {
    // How do I pass a child function?>
}

I've tried childList += { trState: String -> ... } but this yields a React error: "Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead."

[Leonya]

Use RProps instead of dynamic. Then, simply,

Transition {
  div {
    ...
  }
}

[SalomonBrys]

This doesn't change the problem.

I don't want to add a component child to the Transition component (in your example, a div), but a function child.

[Skolotsky]

Here's example how to add functional component in terms of kotlin react #121

[SalomonBrys]

Not applicable.
What's needed is a Value Prop, not a Functional Component.
In this instance, this is a function that takes a Boolean parameter, which is a primitive and cannot implement RProp.

[SalomonBrys]

This works:

fun <P> RBuilder.renderChild(rc: RBuilder.(P) -> Unit) {
    childList += { p: P -> buildElement { rc(p) } }
}

And can be used as such:

Transition {
    attrs {
        `in` = shown
        timeout = 350
    }

    renderChild { transitionState: String ->
        div { /*...*/ }
    }
}

This should be added to the library.

[Skolotsky]

{ p: P -> buildElement { rc(p) } } is functional component, but you create new each time.
Better way is to create once and reuse it. And you can see in example #121 creating and reusing fuctional component.