I would like to build two components in Kotlin/Rea...

# javascript

[Daniele B]

I would like to build two components in Kotlin/React:
MyElementsList and MyElement

MyElementsList(content = {
    MyElement(label = "a", value = "1")
    MyElement(label = "b", value = "2")
    MYElement(label = "c", value = "3")
})

what should be the definition of MyElementsList’s content parameter to be able to pass a block of components ?
currently this is what I wrote, but it doesn’t seem to work:

fun RBuilder.ElementsList(content: (ReactElement) -> Unit) = child(ElementsList) {
    attrs {
        this.content = content
    }
}

external interface ElementsListProps : RProps {
    var content : (ReactElement) -> Unit
}

val ElementsList = functionalComponent<ElementsListProps> { props ->
    div {
        props.content
    }
}

it compiles, but it just shows <div></div> with no content
the MyElement components are shown correctly if they are not enclosed in the MyElementsList component, so it looks like the issue is in the MyElementsList component

[Bahaa Kallas]

fun RBuilder.ElementsList(content: RBuilder.() -> Unit) = child(ElementsList) {
    attrs {
        this.content = content
    }
}
external interface ElementsListProps : RProps {
    var content : RBuilder.() -> Unit
}

[Bahaa Kallas]

and when calling the prop content. you call it like this:

props.content.invoke(this)

[Daniele B]

I get this issue:

[Daniele B]

@Bahaa Kallas

[Bahaa Kallas]

ah.. you have external keyword. Its not needed when define props interfaces. It will work without it

[Daniele B]

I was using it, because that’s how it is in the tutorial:

[Daniele B]

https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/04_Making_It_React

[Bahaa Kallas]

is ElementsList a component defined in your kotlin code or imported through npm (its javascript component) ?
for any component you create within your kotlin code you will never use the external keyword
external indicate that the following (class-function-interface) is defined in javascript and not in your kotlin code

[Daniele B]

ok, thanks, I get it now!
yes, ElementsList is defined in my Kotlin code

[Daniele B]

fantastic, I just tried your code suggestion, with RBuilder.() -> Unit and invoke(this) and it works!

[Daniele B]

@Bahaa Kallas many thanks! this was a great step for me!

[Daniele B]

I spent 5 hours yesterday trying all different combinations and I couldn’t make it work 😓