Simple todo app doesnt even work with input values

[eguneys]

render an array of input elements and buttons to save, edit one input element, and remove if the input value is empty. The item removes but the next item input value dissapears.
I added the key property in the example which fixes the issue, but otherwise issue is reproducible.

Here's some dig code.

function slices(ctrl: Ctrl) {
  return h('div.slices', ctrl.slices.map(slice =>
             h('div.slice', [h('input', {
               key: slice.name,
               attrs: {
                 value: slice.name,
               },
               on: {
                 change(e) {
                   slice.name = e.target.value
                   ctrl.redraw()
                 }
               }
             }), h('button', {
                 on: {
                   click() {

                     if (slice.name === '') {
                       ctrl.remove(slice)
                     } else {
                       ctrl.save(slice)
                     }
                     ctrl.redraw()
                   }
                 }
             }, 'Ok')])

  save(slice: Slice) {
    console.log(slice)
  }

  remove(slice: Slice) {
    this.slices.splice(this.slices.indexOf(slice), 1)
    console.log(this.slices)
  }

I can't care less about this to create an example, just fix this A S A P. :shame:

[Jan van Brügge]

You should use props not attrs for controlled inputs.