Whitespace text nodes cannot appear as a child of <tr>

[Lokua]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

[email protected]

Link to runnable example

Code Sandbox

Steps to reproduce

Seems we are unable to render jsx tables without white space warnings. This is not limited to <tr> as the title suggests, but pretty much any scenario where'd you want to write a table in jsx directly using typical code indentation will result in this error: Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tr>. Make sure you don't have any extra whitespace between tags on each line of your source code..

code sandbox repro: https://codesandbox.io/s/fervent-star-m9qufk?file=/src/App.js

Easy work around is to wrap the jsx in a component: https://codesandbox.io/s/wonderful-haibt-bldeqz?file=/src/App.js

So not really a huge problem, but something I thought was worth bringing up.

Expected behavior

Semantic tables in jsx/html (non-markdown) don't result in console warnings.

Actual behavior

jsx/html (non-markdown) tables result in validateDOMNesting warnings.

Runtime

No response

Package manager

No response

OS

No response

Build and bundle tools

No response

[jblarriviere]

I've experienced an issue that i think is related to this. It looks like some form of code indentation create unexpected linebreaks, whitespaces and/or p tags in the generated file.

If it can help, I've realised that this indentation leads to a line break and a space being added as children of the Inline between the buttons :

<Inline>
	<Button>A</Button>
    <Button>B</Button>
</Inline>

when this one creates no br or whitespace but wraps the content of the buttons in a p tag :

<Inline>
	<Button>
		A
	</Button>
    <Button>
		B
	</Button>
</Inline>

[wooorm]

@jblarriviere that is unrelated and expected behavior: https://mdxjs.com/docs/what-is-mdx/#interleaving

[paulkre]

Does anyone have a workaround?

[wooorm]

There’s a workaround mention in the post:

Easy work around is to wrap the jsx in a component: [codesandbox.io/s/wonderful-haibt-bldeqz?file=/src/App.js](https://codesandbox.io/s/wonderful-haibt-bldeqz?file=/src/App.js)

Even better, use an expression:

export const planet = 'World'

# Hello, {planet}!

{
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
      </tr>
    </thead>
  </table>
}