CODEWITHSUNDEEP
javascripthtmlnode.jsreactjsvalidation
Gerald Ylli
Gerald Ylli

Reputation: 116

React: Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tr>

So I have this error popping up about the spaces left in . I am trying to find an answer in stack but I don't actually have a or any table element in my project because I am using React and Material-UI. I also get another similar error like this:

Warning: validateDOMNesting(...): <td> cannot appear as a child of <tfoot>.

which again I cannot find any or in my project. My error tab is filled and every error has one same dependency which is:

js/0.chunk.js:227830:31

Upvotes: 1

Views: 3888

Answers (1)

Titulum
Titulum

Reputation: 11456

Seems that React is complaining about whitespace around curly brackets in JSX tags. Somewhere, one of those JSX tags is actually a <td> tag, but because it's a third-party element you can't easily see what tag it is behind the scenes.

So you will have to change all following code:

<tag> {code} </tag>

to

<tag>{code}</tag>

The easiest way to fix this would be to do a global replace in all files with a JSX file extension:

  • > { to >{
  • } </ to }</

But that's quite prone to breaking because it could be valid code in some places.

I'm not sure whether there is an ESlint rule for catching these issues during development.

Upvotes: 2

Related Questions