Nested map (for cells in a grid)

[sekoyo]

Hey thanks for the lib looks sweet. I'm checking I have the syntax here right (guessing not) as it throws on subsequent renders after the first one:

  render = () => {
    console.log(this._columnRange); // [0, 1]
    console.log(this._rowRange); // [0, 1, 2, 3, 4, 5, 6, 7]

    const canvas = html`
      <div class="canvas" style=${`width:${this._canvasWidth}px;height:${this._canvasHeight}px`}>
        ${this._rowRange.map(
          rowIndex =>
            html.node`${this._columnRange.map(columnIndex => {
              return html`<div>cell</div>`;
            })}`
        )}
      </div>
    `;

    render(this._root, canvas);
  };

This is to render a range of cells in a virtual window, and the second render has the same range values. On the second render it throws the following error:

Where am I going wrong here? Also I see perf seems to be about the same with non-keyed items on https://github.com/krausest/js-framework-benchmark which is cool, but not sure how it's being done e.g. maybe the html strings need to be unique? (which they would be once I add the styles to them). Thanks

[WebReflection]

html.node creates a new node each time, but moreover, it doesn't understand arrays ... why are you using it at all, if I might ask?

[WebReflection]

in few words, I think you want to rather do this:

render = () => {
  console.log(this._columnRange); // [0, 1]
  console.log(this._rowRange); // [0, 1, 2, 3, 4, 5, 6, 7]

  const canvas = html`
    <div class="canvas" style=${`width:${this._canvasWidth}px;height:${this._canvasHeight}px`}>
      ${this._rowRange.map(
        rowIndex =>
          html`<div>${
            this._columnRange.map(columnIndex => html`<div>cell</div>`
          )}</div>`
      )}
    </div>
  `;

  render(this._root, canvas);
};

or you gotta explain me what you are trying to do ... but in any case, html.node is not meant to be used at all in your case, it's either html.for(...) or just html (recommended).

[sekoyo]

Whoops that was it, I had it left over from when I hadn't wrapped it in <div class="canvas"> thanks