Loop inside JSX templates has issues

[Javiani]

I´m using babel to transform JSX templates into virtual-dom hyperscript so I don´t have to write those h() calls manually.

It works well when you don´t have a loop inside of it. Otherwise virtual-dom misses some elements.

return (
        <ul className="list-group">
            { data.items.map ( (item, index) => {
                return (
                    <li className={`list-group-item form-group ${item.edit?'edit':''}`}>
                        <div className="item">
                            <input type="checkbox" className="check" title={item.id} value={item.id} checked={item.completed} />
                            <label title={item.id}>{item.text}</label>
                            <button type="button" className="close">
                                <span className="remove" title={item.id}>&times;</span>
                            </button>
                        </div>
                        <input type="text" className="form-control" title={item.id} value={item.text} />
                    </li>
                )
            })}
        </ul>
    )

This is just a Todo List JSX template, babel´s output seems to be ok, it generates the h() calls just like documentation suggests, but, in the case of the code above, just the checkbox is being created inside div.item. The label, button and even input:text are simply ignored. There´s no error on compilation or even in runtime.

[alejandrofdiaz]

Anyone has workarounded this?

import { h as hProxy } from 'virtual-dom';
function h(type, props, ...children) {
  return hProxy(type, props, [children]);
}

and use new h instead 🤷