#each having trouble with longer list

[CodingItWrong]

Reproduction project: https://github.com/CodingItWrong/todo-glimmer-native

I'm outputting an array with #each:

    @tracked
    todos = [
      'Try Glimmer Native',
      'Make a Sample App',
      'Make a Tutorial',
    ]

  <StackLayout>
...
    {{#each todos as |todo|}}
      <Label text={{todo}} />
    {{/each}}
  </StackLayout>

I have two actions that update the array:

    replaceTodos() {
      this.todos = ['1', '2', '3']
    }

    replaceWithLongerArray() {
      this.todos = ['A', 'B', 'C', 'D', 'E']
    }

When I replaceTodos with an array of the same length they display fine:

But when I replace with a longer list, the same number of items show, and the very last item is layered over the bottommost from the original array length:

Might the layout not be reflowing, so that all the items longer than the initial length overlap one another?

[lifeart]

@CodingItWrong try specify key for each and use objects, instead of strings.

{{#each todos key="id" as |todo|}}
      <Label text={{todo.text}} />
{{/each}}

 this.todos = [{id: '12',  text: 'foo'}, ...]

[CodingItWrong]

That definitely fixed it!

It might be good for there to be a warning in the logs when there's an #each without a key. Thoughts?

I'll do a PR to update the #each example in the readme to include a key.

[bakerac4]

@CodingItWrong I'll update the docs in that branch I'm using. Regarding a warning in the logs, I think thats a great idea. But that would be in glimmer.js/glimmer vm itself. Closing this for now, as a new version of Glimmer Native is being released shortly with the document change fix