Home » Reactjs » How to correctly wrap few TD tags for JSXTransformer?

How to correctly wrap few TD tags for JSXTransformer?

Posted by: admin November 30, 2017 Leave a comment

Questions:

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.

Answers:

So you have pairs of <td> elements which you want to return from a .map. The easiest way to do this is to just wrap them in an array.

<tr>
  {data.map(function(x, i){
    return [
      <td>{x[0]}</td>,
      <td>{x[1]}</td>
    ];
  })}
</tr>

Don’t forget the comma after the first </td>.

Questions:
Answers:

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>

Questions:
Answers:

Here is how you will do it

<tbody>
    {this.props.rows.map((row, i) =>
      <tr key={i}>
        {row.map((col, j) =>
          <td key={j}>{col}</td>
        )}
      </tr>
    )}
</tbody>