The following bit of code will work fine as is when the list is unsorted. You can add and remove persons as expected.
The problem crops up when we want the list to be sorted. Just adding in sorting commands seems to change something that causes the wrong name to be associated with the remove action. Any ideas how to fix this problem?
To see the bug, do the following:
Expected:
Actual:
include karax/prelude
import algorithm, sequtils
var
people: seq[string] = @["wendy", "sam", "nancy"] #.sorted # line A
newPersonName = ""
proc mkRemoveAction(person: string): proc() =
result = proc() =
echo "trying to remove " & person
people = filter(people,
proc(pA: string): bool =
pA != person)
# sort(people) # line B
echo "people = " & $people
proc createDom(): VNode =
result = buildHtml(tdiv):
h1: text "Example Bug"
tdiv:
input(`type` = "input"):
proc onchange(ev: Event, n: VNode) =
echo "value = " & n.value
newPersonName = $n.value
button(`type` = "button"):
text "Add Person"
proc onclick(ev: Event, n: VNode) =
echo "trying to add person: " & newPersonName
people.add(newPersonName)
# sort(people) # line C
echo "People = " & $people
ul:
for x in people:
li:
text x
span:
button(`type` = "button", onclick = mkRemoveAction(x)):
text "(X)"
setRenderer createDom
Error: type mismatch: got <seq[string]>
Sort cannot receive people seq as param.
Yes, that works!
I'm a little familiar with React's "key" prop and was thinking there should be something similar in Karax. Not so crazy about using the "id" prop though since it has other implications and should be unique for that page. I noticed in the code that there is a "key" prop on VComponent that does similar, but I don't understand VComponents yet.