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

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>

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.

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

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
}