Return multiple lines in React

Question

I would like to be able to return 2 <tr> lines, which works by wrapping in a <tbody> as suggested here:

var Item = React.createClass({
    render: function() {
        return (
            <tbody>
                <tr>/*...*/</tr>
                <tr>/*...*/</tr>
            </tbody>
        );  
    }   
});

However, I get a warning from React: < tbody> cannot appear as a child of < tbody>

Is there any other way to do this that would be more DOM friendly?

@AkshatMahajan: Likely just a typo in the post, otherwise the code would not even be parsed (because syntax error). — Felix Kling, Apr 01 '16 at 23:35
Have you tried appending it to instead of ? I've written a lot of HTML tables in the past & have never been forced by any browser to use these 3 tags: , or . They're optional &
and tags work for separating header vs. body cells, respectively. Besides, most people have gotten away from tags & switched to
tags, as
tags cause conflicts with CSS. Only tabular data still needs
tags.
@Clomp https://facebook.github.io/react/docs/thinking-in-react.html — zerkms, Apr 01 '16 at 23:50
Yes, that's tabular data, since it fits inside of a spreadsheet like grid. — Clomp, Apr 01 '16 at 23:52

score 3 · Answer 1 · answered Apr 01 '16 at 23:52

3

That's an annoying limitation of React right now. A <table> can contain multiple <tbody> though -- would rendering <Item> as an additional <tbody> within <table> work for you?

answered Apr 01 '16 at 23:52

JMM

26,019
3
50
55

A good example of using 3x table divisions would include using ``, `` & ``, rather than 3x `` tags. See: http://www.w3schools.com/tags/tag_tbody.asp – Clomp Apr 02 '16 at 00:03
1

Those have totally different semantics. The OP appears to need rows in the body. – JMM Apr 02 '16 at 00:17
I realized I was using the `Item` component within another ``, which is what was causing the warning. Removing that additional outer `` resolved the warning. Still, it would be nice to be able to return 2 `` without being wrapped in a ``, as CSS applied to an n-th `` doesn't work with this. – Ryan McClure Apr 02 '16 at 15:11

score 0 · Answer 2 · answered Apr 01 '16 at 23:59

It appears that you're running into the maximum JSX root node problem. There can only be 1 root node in the return, but it can have any number of child nodes. So try this:

var Item = React.createClass({
    render: function() {
        return (
            <table> /* <- This is the root node. */
                <thead> /* <- Multiple nodes start at this level. */
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                </thead>
                <tbody>
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                </tbody>
                <tfoot>
                    <tr>/*...*/</tr>
                    <tr>/*...*/</tr>
                </tfoot>
            </table>
        );  
    }   
});

It's easy to solve if you can generate the whole table in a single component, the problem is when you need to delegate representation of several rows in a container to a component. — JMM, Apr 02 '16 at 00:19

Return multiple lines in React

2 Answers2