У меня есть массив с элементами, и я хочу сделать что-то вроде этого:

<tr>
(until have items in array
<td></td><td></td>)
</tr>

Но если я это сделаю, я получу ошибку JSXTransformer:

Соседние элементы XJS должны быть заключены в тег

Рабочая версия:

{rows.map(function (rowElement){
    return (<tr key={trKey++}>
        <td className='info' key={td1stKey++}>{rowElement.row[0].value}</td><td key={td2ndKey++}>{rowElement.row[0].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[1].value}</td><td key={td2ndKey++}>{rowElement.row[1].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[2].value}</td><td key={td2ndKey++}>{rowElement.row[2].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[3].value}</td><td key={td2ndKey++}>{rowElement.row[3].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[4].value}</td><td key={td2ndKey++}>{rowElement.row[4].count}</td>
                 .......
        </tr>);
})}

Я попробовал это. Но с<div> закрывающий тег не работает нормально

Ответ здесь: Uncaught Ошибка: Инвариантное Нарушение: findComponentRoot (..., ... $ 110): Невозможно найти элемент. Это, вероятно, означает, что DOM был неожиданно мутирован

<tbody>
    {rows.map(function (rowElement){
        return (<tr key={trKey++}>
        {rowElement.row.map(function(ball){
            console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
            return(<div key={divKey++}>
                <td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
            </div>);
        })}
        </tr>);
    })}
</tbody>

Посоветуйте, пожалуйста, как правильно обернуть несколько тегов TD! Я пытался использовать руководствоДинамичные Дети, но JSXTransformer не позволяет мне это делать.