How to correctly wrap few TD tags for JSXTransformer?

Question

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

Leave a Comment Cancel reply