Warning when rendering tables

[n-sviridenko]

When rendering tables, it shows the following warning:

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>. Add a <tbody> to your code to match the DOM tree generated by the browser.

It seems like either mdx or any dependency renders <table/>s without <tbody/>s inside.

React 16.3.

[timneutkens]

Can you provide a reproduction?

[n-sviridenko]

@timneutkens Sorry, was a wrong warning. The real one is because of \n inside thead caused by https://github.com/mdx-js/mdx/blob/master/packages/mdx/mdx-hast-to-jsx.js#L23-L26:

Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <thead>. Make sure you don't have any extra whitespace between tags on each line of your source code.

[n-sviridenko]

It produces the following code:

{`
`}<MDXTag name="thead" components={components} parentName="table">{`
`}<MDXTag name="tr" components={components} parentName="thead">{`
`}<MDXTag name="th" components={components} parentName="tr" props={{"align":null}}>{`Item 1`}</MDXTag>{`

[timneutkens]

I mean, can you provide the MDX you're writing, since otherwise I can't make a failing test.

[n-sviridenko]

Sure,

| Item 1 | Item 2 |
| --- | --- |
| Item 1 | Item 2 |

[n-sviridenko]

@timneutkens is there any updates regarding this issue?

[timneutkens]

Haven't looked into it yet. Currently focusing on specific parts of Next.js. I've added a few labels so that someone can look into it if they want to.

[xz8la8]

hi, this warning is boring, although it can work well, can you fixed it as soon as possible ?

[n-sviridenko]

Is there any update?