How to correctly wrap few TD tags for JSXTransformer?

Question

I have an array with items and I want to make something like this:

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

But if I do that, I get an JSXTransformer error :

Adjacent XJS elements must be wrapped in an enclosing tag

Working version:

{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>); })} 

I tried this one. But with <div> enclosing tag it doesn't work fine.

Answer here: Uncaught Error: Invariant Violation: findComponentRoot(..., ...$110): Unable to find element. This probably means the DOM was unexpectedly mutated

<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> 

Please, advise me how to properly wrap few TD tags! I tried use a guide Dynamic Children, but JSXTransformer doesn't allow me do that.

Answer 1

The following error usually occurs when you are returning multiple elements without a wrapping element

Adjacent XJS elements must be wrapped in an enclosing tag

Like

return (     <li></li>     <li></li> ); 

This doesn't work because you are effectively returning two results, you need to only ever be returning one DOM node (with or without children) like

return (     <ul>         <li></li>         <li></li>     </ul> );  // or   return (<ul>     {items.map(function (item) {         return [<li></li>, <li></li>];     })} </ul>); 

For me to properly answer your question could you please provide a JSFiddle? I tried to guess what you're trying to do and heres a JSFiddle of it working.

When using the div as a wrapper its actually never rendered to the DOM (not sure why).

<tr data-reactid=".0.0.$1">     <td class="info" data-reactid=".0.0.$1.$0.0">1</td>     <td data-reactid=".0.0.$1.$0.1">2</td>     <td class="info" data-reactid=".0.0.$1.$1.0">1</td>     <td data-reactid=".0.0.$1.$1.1">2</td>     <td class="info" data-reactid=".0.0.$1.$2.0">1</td>     <td data-reactid=".0.0.$1.$2.1">2</td>     <td class="info" data-reactid=".0.0.$1.$3.0">1</td>     <td data-reactid=".0.0.$1.$3.1">2</td> </tr> 

EDIT: React 16+

Since React 16 you can now use fragments.

You would do it like this now

return <>     <li></li>     <li></li> <>; 

Or you can use <React.Fragment>, <> is shorthand for a HTML fragment, which basically is just a temporary parent element that acts as a container, once its appended to the document it no longer exists.

https://reactjs.org/docs/fragments.html

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment