The current verbosity in creating functional compo...

# react

[andylamax]

The current verbosity in creating functional components in kotlin-react is uncanny.

I would have to create the function

external interface DumbProps {
   var name: String
}

val DumbComp = functionalComponent<DumbProps> {
    div { +"Hi, I am ${it.name}" }
}

Then, I would have to create an extension for RBuilder like so

fun RBuilder.DumbComp(props: DumbProps,handler:RHandler<DumbProps>) = child(DumbComp,props,handler)

This makes the usage of functional components and hooks so verbose.

Advice: RBuilder should add a member function to ease use of functional components and hooks like so

class RBuilder{
  . . .
  operator fun <P : RProps> FunctionalComponent<P>.invoke(
    props: P = jsObject(),
    handler: RBuilder.(P) -> Unit
  ) = child(this, props, handler)
  . . .
}

So that now, I can just go and call

DumbComp {
   attrs.name = "Andy" 
}

[frank]

@andylamax, In cases where I only have one property, I'm too lazy to create an interface. Do you know if I can reuse RProps?
Like This:

val DumbComp = functionalComponent<RProps> { props ->
    div { +"Hi, I am $props["name"]" }
}

[andylamax]

I Usually have a hack for simple components.

I usually have more of a utility Extension function called Component, it goes like so

fun <P : RProps> RBuilder.Component(props: P = jsObject(), builder: RBuilder.() -> Unit) = child({
    buildElements {
        builder()
    }
}.unsafeCast<FunctionalComponent<P>>(), props)

If I have a simple Component like the one you said, I just do,

fun RBuilder.DumbComp(name:String) = Component<RProps>{
  div { +"Hi, I am ${name}}"}
}

So now you can just call your component

DumbComp("Andy") or DumbComp(name = "Andy")