"warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>" when using subgrids

[brownieboy]

The full browser console warning is:

Warning: validateDOMNesting(...): cannot appear as a child of

. See GridTable > table > GridRowContainer > GridRow > tr. Add a to your code to match the DOM tree generated by the browser.

I get this when using subgrids in my table. Specifically, I have mix of rows in my table, some of which have subgrids (i.e. a children array in the source data) and some of which don't (i.e. the children array is an empty array). The rows that have subgrids generate

tags inside tags in the resulting HTML. However, the rows that don't have subgrids generate tags only (i.e. not inside a tbody). This means that you have tags that are peers of tags. which React doesn't like.

I can test up a test repo for this issue if anybody wants.

I'm using react 0.14 with griddle-react 0.2.14.

Edit: 19 Oct 2015
Apologies, I didn't spot that my html tags were being parsed by Github in my original post, so it probably didn't make a whole lot of sense when I first posted it! The tags should all be properly escaped now.

[SylarRuby]

@brownieboy have you already solved it?

[brownieboy]

@SylarRuby,

No, I just lived with it. It didn't actually cause any problems on the project where I was using it. It's a warning not an error.

Have you checked in the very latest version? (I haven't.)

[lukasjsk]

@brownieboy @SylarRuby
We hit the same issue and we were able to get rid of the warning by wrapping rows without children inside <tbody> in gridRowContainter.jsx (last line of render method).

So instead:

return that.props.hasChildren === false ? arr[0] : <tbody>{that.state.showChildren ? arr.concat(children) : arr}</tbody>

we do

return that.props.hasChildren === false ? <tbody>arr[0]</tbody> : <tbody>{that.state.showChildren ? arr.concat(children) : arr}</tbody>

This was just a quick fix and I still need to check if it's not breaking anything else...

[roessera]

wrapping arr[0] does not fix the issue when using a grid containing both rows and rows with subgrids (children). I receive the following error upon load:

Warning: validateDOMNesting(...): cannot appear as a child of . See GridTable > tbody > GridRowContainer > tbody.

Using React 0.14.5

[bellatrix1001]

Has anyone been able to come up with a solution for this?

[apalanki]

To tag along with what @lukasjsk proposed.

Since the griddleRowContainer only has data related to row, the parent gridTable needs to pass along via props to griddleRowContainer if the entire data has any children or not.

So changes has to be made at two places.

1. In gridTable, while creating grid row container on line 151, a new prop needs to passed along called anyHasChildren: anyHasChildren,
2. In gridRowContainer, that prop needs to be accessed on last line of return statement as:

return that.props.hasChildren ? React.createElement('tbody', null, that.state.showChildren ? arr.concat(children) : arr) : (that.props.anyHasChildren ? React.createElement('tbody', null, arr[0]): arr[0]);

fixed this issue for me without breaking anything on React 15.3.1.