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

[Lokua]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• 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

[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>
}