Having this JavaScript code, how do I need to writ...

# javascript

[Alexander Weickmann]

Having this JavaScript code, how do I need to write this in KotlinJS?

const ProductHomeExample = () => (
  <ProductHome siteTitle="test" />
);
export default () => (
    <SomeComponent
      renderProductHome={ProductHomeExample}
    />
);

I am trying like this:

val ProductHomeExample = {
            ProductHome {
                attrs.siteTitle = "Test"
            }
        }
SomeComponent {
  attrs.renderProductHome = ProductHomeExample
}

but this leads to error:
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component

Edit: From looking at the type signature in the js file, I can see renderProductHome is of type React.ComponentType<{}>. So the question simplifies, how to create such a React.ComponentType<{}> instance?

[Foso]

I think you need to create a Wrapper, something like this https://github.com/Foso/Sheasy/blob/develop/web/src/jsMain/kotlin/de/jensklingenberg/sheasy/web/components/materialui/Button.kt

[Akif Abasov [JB]]

Usual in kotlin/js props like renderProductHome should have type RBuilder.() -> Unit to be called in correct way in render functions. So you need to explicitly specify ProductHomeExample type to have RBuilder context. Another point is - if ProductHome is class component the pattern is to create wrapper to call it

fun RBuilder.productHome(siteTitle: String) = child(ProductHome::class) {
  attrs {
    this.siteTitle = siteTitle
  }
}

And then you will be able to have

val ProductHomeExample: RBuilder.() -> Unit = {
  productHome("Test")
}

[Akif Abasov [JB]]

And SomeComponent should have the same:

fun RBuilder.someComponent(
  renderProductHome: RBuilder.() -> Unit
) = child(SomeComponent::class) {
  attrs {
    this.renderProductHome = renderProductHome
  }
}

[Akif Abasov [JB]]

so after all you will be able to call it like this

fun RBuilder.render() {
  someComponent(ProductHomeExample)
}

[Akif Abasov [JB]]

If ProductHome and SomeComponent are functional components code will be little different. It should be called child(SomeComponent) instead of child(SomeComponent::class) . But you should remember that in Kotlin/JS the way to create functional component is

val SomeComponent = functionalComponent<SompeComponentProps> {
  //...
}

instead of just creating function (like in JS)

[Alexander Weickmann]

Thank you for help 🙂
What worked now was this:

var renderProductHome: () -> ReactElement

and then

attrs.renderProductHome = {
    ProductHome {
        attrs.siteTitle = "test"
    }
}