Component Iteration and Removal

[rpf3]

Describe the bug

I created a store of type Writable<string[]> and them I wanted to iterate over the value of the store to create a component for each item in the array. This child component also happens to have a text input box in it as well as a button that when clicked will remove the value from the store. In the example I provided, I have three of these child components. If I click the remove button for the middle component in the array, it gets removed but the value of the text input for component 3 gets set to the prior value of component 2.

Before Removal

After Removal

Reproduction

https://github.com/rpf3/example-each-loop-bug

Logs

No response

System Info

System:
  OS: Linux 4.19 Ubuntu 20.04.4 LTS (Focal Fossa)
  CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Memory: 2.13 GB / 3.84 GB
  Container: Yes
  Shell: 5.0.17 - /bin/bash
Binaries:
  Node: 16.16.0 - ~/.asdf/installs/nodejs/16.16.0/bin/node
  npm: 8.11.0 - ~/.asdf/plugins/nodejs/shims/npm
npmPackages:
  svelte: ^3.46.0 => 3.50.1

Severity

annoyance

[geoffrich]

You need to use a key in your each block so Svelte knows which element to update when the order changes. This is explained in the tutorial.

In this case, the item itself can be the key if it's unique.

{#each $items as item (item)}
  <Item {item} />
{/each}