Loop inside JSX templates has issues

Author: JavianiCreated Dec 18, 2016Updated Aug 27, 2018

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.

xml

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.

Source: Matt-Esch/virtual-dom

View original on GitHub View discussion on GitHub