Loop inside JSX templates has issues
Javiani opened this issue · 1 comments
Javiani commented
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}>×</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 commented
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