@ObservedV2 Item {
  private static nextId = 0;
  id : number;
  @Trace s : string;

  constructor() {
    this.id = Item.nextNumber++;   
    this.s = this.id.toString();  // in reality more complex 
  }
}

@Entry
@ComponentV2
struct Index {
  // next item to add to arr, ensure items are unique.
  
  @Local arr : Array<Item> = [ new Item(), new Item(), new Item(), new Item(), new Item(), new Item()  ]
  @Local bgColor : Array<string> = [ Color.White, Color.Gray ];

  build() {
    Column() {
      Text('3_repeat_objects.ets')

      List() {
        Repeat(this.arr)
          .virtualScroll()
          .every(( repeatItem ) => {
            ListItem() {
              Button("Replace") {
                  Text(repeatItem.item.s)
              }
              .onClick(() => {
                // update object property without marking array arr as changed 
                repeatItem.item.s = "A" + repeatItem.item.s;  
              })
              .height(100)
            }
            // 2 visible items at a time
            // for simplicity assume no offscreen items
            .width("100%").height(200)
            // can add to explain with index 
            .backgroundColor(this.bgColor[repeatItem.index % 2])
          })
          .key(item => item.id.toString())
      } // List

      Button("Append new item")
        .onClick(() => { this.arr.push( new Item()); })            
      Button("Delete last item")
        .onClick(() => { this.Array.pop(); }) 
      Button("Update item index #1")
        .onClick(() => { this.arr[1]= new Item(); })
      Button("Replace item index #1 with two new")
        .onClick(() => { this.arr.splice(1, 1, new Item(), new Item() ); })
  }
}
}