Eugene Podoliako Eugene Podoliako - 2 months ago 86
React JSX Question

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

Can you explain me why react show warning

Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text.
? I don't see any text inside tag

Code that renders table

export default class AllCarWashTable extends React.Component{

constructor(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 {
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 {
var cells = {
return <td key={colData.key}> {item[colData.key]} </td>;
return <tr key={}> {cells} </tr>;

let headers = this.generateHeaders();
let rows = this.generateRows();

return (
<table className="table table-hove">


At the end, my table has the following structure

enter image description here

Where is the problem?


The problem is the spaces in this line:

return <tr key={}> {cells} </tr>;

It might seem silly, but you're actually rendering the cells and some whitespace (i.e. text). It should look like this:

return <tr key={}>{cells}</tr>;