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

Solution 1:

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>;

Solution 2:

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
}

Solution 3:

In my case where was an empty '' output (w\o 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>