Update to new Kotlin-React DSL

Author: SebastianAigner

src/jsMain/kotlin/App.kt

@@ -1,11 +1,12 @@
 import react.*
-import react.dom.*
-import kotlinx.html.js.*
 import kotlinx.coroutines.*
+import react.dom.html.ReactHTML.h1
+import react.dom.html.ReactHTML.li
+import react.dom.html.ReactHTML.ul
 
 private val scope = MainScope()
 
-val app = fc<Props> {
+val App = FC<Props> {
     var shoppingList by useState(emptyList<ShoppingListItem>())
 
     useEffectOnce {
@@ -21,7 +22,7 @@ val app = fc<Props> {
         shoppingList.sortedByDescending(ShoppingListItem::priority).forEach { item ->
             li {
                 key = item.toString()
-                attrs.onClickFunction = {
+                onClick = {
                     scope.launch {
                         deleteShoppingListItem(item)
                         shoppingList = getShoppingList()
@@ -31,8 +32,8 @@ val app = fc<Props> {
             }
         }
     }
-    child(inputComponent) {
-        attrs.onSubmit = { input ->
+    InputComponent {
+        onSubmit = { input ->
             val cartItem = ShoppingListItem(input.replace("!", ""), input.count { it == '!' })
             scope.launch {
                 addShoppingListItem(cartItem)

src/jsMain/kotlin/InputComponent.kt

@@ -1,33 +1,35 @@
+import org.w3c.dom.HTMLFormElement
 import react.*
-import react.dom.*
-import kotlinx.html.js.*
-import kotlinx.html.InputType
-import org.w3c.dom.events.Event
 import org.w3c.dom.HTMLInputElement
+import react.dom.events.ChangeEventHandler
+import react.dom.events.FormEventHandler
+import react.dom.html.InputType
+import react.dom.html.ReactHTML.form
+import react.dom.html.ReactHTML.input
 
 external interface InputProps : Props {
     var onSubmit: (String) -> Unit
 }
 
-val inputComponent = fc<InputProps> { props ->
+val InputComponent = FC<InputProps> { props ->
     val (text, setText) = useState("")
 
-    val submitHandler: (Event) -> Unit = {
+    val submitHandler: FormEventHandler<HTMLFormElement> = {
         it.preventDefault()
         setText("")
         props.onSubmit(text)
     }
 
-    val changeHandler: (Event) -> Unit = {
-        val value = (it.target as HTMLInputElement).value
-        setText(value)
+    val changeHandler: ChangeEventHandler<HTMLInputElement> = {
+        setText(it.target.value)
     }
 
     form {
-        attrs.onSubmitFunction = submitHandler
-        input(InputType.text) {
-            attrs.onChangeFunction = changeHandler
-            attrs.value = text
+        onSubmit = submitHandler
+        input {
+            type = InputType.text
+            onChange = changeHandler
+            value = text
         }
     }
 }

src/jsMain/kotlin/Main.kt

@@ -1,8 +1,8 @@
 import react.dom.render
 import kotlinx.browser.document
+import react.create
 
 fun main() {
-    render(document.getElementById("root")) {
-        child(app)
-    }
+    val container = document.getElementById("root") ?: error("Couldn't find container!")
+    render(App.create(), container)
 }