I have created this handy function ```typealias Ha...

# javascript

[Ali Albaali]

I have created this handy function

typealias Handler<P> = P.() -> Unit
fun <P : RProps> fc(displayName: String? = null, func: RBuilder.(P) -> Unit): RBuilder.(Handler<P>) -> ReactElement = { handler ->
    child(functionalComponent(displayName, func)) {
        attrs(handler)
    }
}

using it looks like

render(document.getElementById("root")) {
    child(functionalComponent {
        var value by useState("")

        myInput {
            this.value = value
            this.onValueChange = { value = it }
        }
    })
}

external interface MyInputProps : RProps {
    var value: String
    var onValueChange: (String) -> Unit
}

val myInput = fc<MyInputProps> { props ->
    styledInput {
        attrs {
            value = props.value
            onChangeFunction = { props.onValueChange((it.target as HtmlInputElement).value) }
        }
    }
}

The problem is the input loses focus everytime I type a letter, however if I do it like the regular way it won't
The regular way:

render(document.getElementById("root")) {
    child(functionalComponent {
        var value by useState("")

        child(myInput) {
            attrs {
                this.value = value
                this.onValueChange = { value = it }
            }
        }
    })
}
val myInput = functionalComponent<MyInputProps> { props ->
    styledInput {
        attrs {
            value = props.value
            onChangeFunction = { props.onValueChange((it.target as HtmlInputElement).value) }
        }
    }
}

Does anyone have an idea on why this is happening?