Possible issue with integer keys + heterogeneous siblings

[steven88888]

One component named Todo has a render function as following. It will ganerate one Todo list with js codes compiled by React Templates. 2 problems will happen:

1. If todo.key is integer (which can be zero), add operation would be not work well.
2. After delete one todo array element of state, UI element can not be removed correspondingly.

I am a fresher of Preact. Maybe they are related to preact/src/vdom/build.js, please check and confirm. Thanks.

<div> 
    <div key="{todo.key}" class="todo-item" rt-repeat="todo in this.state.todos">        
        <img src="src/assets/delete.png"
             onClick="()=>this.remove(todo)"
             title="Remove Todo" />
        <input type="checkbox" checked="{todo.done}" onChange="()=>this.toggleChecked(todoIndex)"/>
        <span rt-class="{done: todo.done}">{todo.value}</span>
    </div>  
    <input key="myinput" class="new-todo" placeholder="What needs to be done?" type="text"
           value="{this.state.edited}"
           onKeyDown="{(e) => this.inputKeyDown(e)}"
           onInput="{this.linkState('edited')}"
           autoFocus="{true}"/>
    <button onClick="()=>this.add()">Add</button><br/>
    <button onClick="()=>this.clearDone()">Clear done</button>
</div>

[steven88888]

If i remove the attribute key of <div>, the 2nd problem will disappear.

[developit]

Hi Steven,

I've never used React Templates, and honestly I wouldn't recommend an approach like that in the first place. Here's a working example of what you wrote, without any of the templating stuff:

https://jsfiddle.net/developit/hq33t3vm/

That being said, it looks like there is an issue with integer keys, which I will certainly look into!

[steven88888]

Hi Jason,
thanks for your answer.

[developit]

Fixed in 3.4.0!