How to extract kotlin-react html into a method

Question

I would like to create a method containing the "html" snippet, but I get the error below.

import react.dom.a
import react.dom.button
import react.dom.div
import react.dom.nav
import react.dom.span
import kotlinx.html.ButtonType
import react.RBuilder
import react.RComponent
import react.RProps
import react.RState

class App : RComponent<RProps, RState>() {

    override fun RBuilder.render() {

        div("container fill") {
        }
        div {
            content()
        }
    }

    fun content() {
        return div() { } // the error below is for this line
    }
}

error: unresolved link. None of the following candidates is applicable due to receiver type mismatch: public built-in fun RBuilder.div (classes: String? = ..., block: RDOMBuilder. () -> Unit): ReactElement defined in response.dom return div () {

Any ideas?

Answer 1

You should add a receiver and probably get rid of it returnlike this:

class App : RComponent<RProps, RState>() {

    override fun RBuilder.render() {

        div("container fill") {
        }
        div {
            content()
        }
    }

    fun RBuilder.content() {
        div() { }
    }
}