Bdtjtk

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 tr

Code that renders 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?

The problem is the spaces in this line:

return <tr key={item.id}> {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={item.id}>{cells}</tr>;

In my case where was an empty '' output (wo space inside)

<tbody>

  {this.props.orders.map(

    order =>this.props.selectedAgent === order.agent ? 

      <Row item={order} key={ order._id } /> : ''

    )

  }

</tbody>

The null does the trick:

<tbody>

  {this.props.orders.map(

    order =>this.props.selectedAgent === order.agent ? 

      <Row item={order} key={ order._id } /> : null

    )

  }

</tbody>

The accepted answer wasn't the root cause in my case. I got the same warning when I had a comment after <th> tag. The warning went away when I removed 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.

This will also happens when using logical AND short-circuit && to show/hide conditional rows:

{

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

}

change it to ternary a ? b : c form where c is null will fix it

{

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

}

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

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

                                                                  ↑

I received this warning when I had a parenthesis instead of a curly bracket

<table>

  <tbody>

    <tr>

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

    </td>

  </tbody>

</table>

Notification warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>. Make sure you don't have any extra white space between tags on each line of your source code.
In my case, initialize variable should NOT is 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;