Matt-Esch / virtual-dom

A Virtual DOM and diffing algorithm
MIT License
11.67k stars 777 forks source link

Hyperscipt doesn't work inside of map/loop #450

Open 8483 opened 5 years ago

8483 commented 5 years ago

I am trying to create virtual table rows with a loop, but they don't appear.

The rendering works, but only to the tbody. This is the resulting HTML.

<div>
    <table>
        <tbody></tbody>
    </table>
</div>

The code

var h = require('virtual-dom/h');
var createElement = require('virtual-dom/create-element');

function view(state) {

    function renderRows() {
        var rows = []
        for (var i = 0; i < state.items.length; i++) {
            var item = state.items[i]
            rows.push(
                h('tr', [
                    h('td', item.documentDate),
                    h('td', item.documentKey)
                ])
            )
        }
        return rows
    }

    let tableRows = renderRows()

    return h('div', [
        h('table', [
            h('tbody', tableRows)
        ])
    ]);
}

var tree = view(state);
var rootNode = createElement(tree);
document.getElementById("app").appendChild(rootNode);

How can I get this to work?