prop "key" is handled incorrectly

[jrieks]

This code:

fun number(key: String, i: Int) = component {
	html("li", innerHtml = "i:$i key:$key")
}
fun loop() = component {
	html("ol",
		children = listOf(1,2,3).map {
			number(it.toString(), it)
		}
	)
}

is rendered like this:

if the key is unused like here:

fun number(key: String, i: Int) = component {
	html("li", innerHtml = "i:$i")
}

it is rendered this way (e.g. there is no "key" anymore in the react components tree):

How is "key" supposed to be used? Shouldn't it be possible to declare the key inside a component, maybe like this?

fun number(i: Int) = component {
	html("li", attributes = mapOf("key" to "$i"), innerHtml = "i:$i")
}

[ashlanderr]

The "key" is a special property in React. You cannot use it to pass data to components. There is a function withKey, that can be used to pass "key" as an identity mark for elements in the loop.

Also, you can use functions like Li, or Div to create DOM elements. html is a low-level function.

fun number(i: Int) = component {
    Li(text = "i:$i")
}

fun loop() = component {
    Ol(
        children = listOf(1, 2, 3).map { 
            number(it).withKey(it) 
        }
    )
}

I don't know how to pass the "key" in a more convenient way, considering how props are passed to a component.

[jrieks]

Thank you for your clarification, I was not aware of the withKey method...