can’t understand how to convert this jsx example i...

# react

[Nail Gilaziev]

can’t understand how to convert this jsx example in kotlin

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

from this tutorial https://reactjs.org/docs/composition-vs-inheritance.html

[Alexander Mikhalchenko]

@Nail Gilaziev It could be something like this:

interface FancyBorderProps: RProps {
    var color: String
}

class FancyBorder: RComponent<FancyBorderProps, RState>() {
    override fun RBuilder.render() {
        div("FancyBorder FancyBorder-${props.color}") {
            props.children()
        }
    }
}

class WelcomeDialog(): RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        child<FancyBorderProps, FancyBorder> {
            attrs { color = "blue" }
            h1("Dialog-title") { +"Welcome" }
            p("Dialog-message") { +"Thank you for visiting our spacecraft!" }
        }
    }

}

[Nail Gilaziev]

Thanks to your reply! I will try it