React: validateDOMNesting: #text cannot appear as a child of <tr>
<p>Can you explain me why react show warning <code>Warning: validateDOMNesting(...): #text cannot appear as a child of &lt;tr&gt;. See Router &gt; RouterContext &gt; CarWashPage &gt; AllCarWashTable &gt; tr &gt; #text.</code>? I don't see any text inside tag <code>tr</code></p>

<p><strong>Code that renders table</strong></p>

<pre><code>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 &lt;th key={colData.key}&gt; {colData.label} &lt;/th&gt;;
    });
}

generateRows() {
    let cols = this.props.cols,  // [{key, label}]
        data = this.props.rows;
    if (this.props.rows.length &gt; 0) {
        return data.map(function(item) {
            var cells = cols.map(function(colData) {
                return &lt;td key={colData.key}&gt; {item[colData.key]} &lt;/td&gt;;
            });
            return &lt;tr key={item.id}&gt; {cells} &lt;/tr&gt;;
        });
    }
}

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

    return (
         &lt;table className="table table-hove"&gt;
             &lt;thead&gt;
                &lt;tr&gt;
                    {headers}
                &lt;/tr&gt;
             &lt;/thead&gt;
             &lt;tbody&gt;
                    {rows}
             &lt;/tbody&gt;

         &lt;/table&gt;
    )
}
}
</code></pre>

<p>At the end, <strong>my table has the following structure</strong> </p>

<p><a href="https://i.stack.imgur.com/ebTAe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ebTAe.png" alt="enter image description here"></a></p>

<p>Where is the problem?</p>