React: validateDOMNesting: #text cannot be displayed as a child of <tr>

Question

Can you explain to me why to respond to the warning Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text. Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text. ? I do not see the text inside the tr tag

The code that displays the table

 export default class AllCarWashTable extends React.Component{ constructor(props) { super(props); this.generateHeaders = this.generateHeaders.bind(this); this.generateRows = this.generateRows.bind(this); }; static propTypes = { cols : React.PropTypes.array.isRequired, rows : React.PropTypes.array.isRequired } generateHeaders() { let cols = this.props.cols; // [{key, label}] return cols.map(function(colData) { return <th key={colData.key}> {colData.label} </th>; }); } generateRows() { let cols = this.props.cols, // [{key, label}] data = this.props.rows; if (this.props.rows.length > 0) { return data.map(function(item) { var cells = cols.map(function(colData) { return <td key={colData.key}> {item[colData.key]} </td>; }); return <tr key={item.id}> {cells} </tr>; }); } } render(){ let headers = this.generateHeaders(); let rows = this.generateRows(); return ( <table className="table table-hove"> <thead> <tr> {headers} </tr> </thead> <tbody> {rows} </tbody> </table> ) } } 

At the end, my table has the following structure

Where is the problem?

Answer 1

The problem is spaces in this line:

 return <tr key={item.id}> {cells} </tr>; 

This may sound silly, but you are actually rendering cells and some spaces (i.e. text). It should look like this:

 return <tr key={item.id}>{cells}</tr>; 

Answer 2

This also happens when using the logical AND short circuit && to show / hide conditional lines:

 { foo && (<tr><td>{foo}</td></tr>) } 

change it to triple a? b: c a? b: c Form a? b: c a? b: c where c is null , fix it

 { foo ? (<tr><td>{foo}</td></tr>) : null } 

Answer 3

In my case, where was the empty '' output (no space inside)

 <tbody> {this.props.orders.map( order =>this.props.selectedAgent === order.agent ? <Row item={order} key={ order._id } /> : '' ) } </tbody> 

Zero does the trick:

 <tbody> {this.props.orders.map( order =>this.props.selectedAgent === order.agent ? <Row item={order} key={ order._id } /> : null ) } </tbody> 

Answer 4

The accepted answer was not the root cause in my case. I received the same warning when I had a comment after <th> . The warning disappeared when I deleted the comment.

 const TableHeaders = (props) => ( <tr> <th>ID</th> {/* TODO: I had a comment like this */} </tr> ) 

EDIT: removing the space between </th> and {/* will also do the trick.

Answer 5

Notification warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody> . Make sure that you do not have extra spaces between tags in each line of source code. In my case, the initialization variable should not be null .

  let elementCart = ''; {/* in the here,warning will append */} if(productsCart.length > 0){ elementCart = productsCart.map((item, index) => { return <CartItem item={item} key={index} index={index} /> }); } return( <tbody id="my-cart-body"> {elementCart} </tbody> ) 

Solution: let elementCart = null;

Answer 6

If anyone else came across this error or a similar gap error in the React material user interface, my solution after hours of hacking my code was a simple javascript comment inside my table.

  { /* sortable here */ } 

I removed this from my table elements and the warning disappeared.

Answer 7

In addition to @Jarno's answer, I also ran into this problem. Double check that you don’t have additional } or { at the end of javascript code:

 {this.props.headers.map(header => <th key={header}>{header}</th>)}} ↑ 

Answer 8

I got this warning when I had a brace instead of a curly brace

 <table> <tbody> <tr> (showMsg && <td>Hi</td>} // leading '(' should be a '{' </td> </tbody> </table> 

Answer 9

I received this warning when I put text inside a <tr> element without <td> elements. I wrapped my text with <td> elements and the warning disappeared.

When I did this, the presence of a space in the text or the use of {} did not matter.