Does not update children components?

[Nikolay Yakimov]

So let us imagine I have some code like this:

render () {
    return (
      <ide-haskell-panel-items class='native-key-bindings' tabIndex='-1'>
        {
          this.items.map(
            (item) => <OutputPanelItem model={item} />
          )
        }
      </ide-haskell-panel-items>
    );
  }

This works fine the first time around. Then I completely change all this.items, and run this.update. Children are only added/removed, but contents doesn't change. I would assume actual contents of children components isn't checked when computing a diff.

So... I would guess this is a "feature", since it avoids creating components unnecessarily. But in this use-case, this leads to problems.

I can work around that with something like this:

async updateItems(items) {
  this.items = []
  await this.update()
  this.items = items
  this.update()
}

but that's kinda awkward and leads to two updates instead of one.

So... any advice?

[Nathan Sobo]

You should be able to implement an update method on OutputPanelItem and it will be called with {model: item}. If you want to maintain the same component per item, which I would recommend, supply a key property to each OutputPanelItem with some unique identifier for the item.

[Nikolay Yakimov]

Oooh, I get it now. Yep, this works, many thanks! Maybe that key thing is worth adding to readme?

[Nathan Sobo]

@lierdakil Thanks for the tip... I hadn't realized we had neglected to mention key props in the docs.