title: Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>
body: <p>I get below error and my rows are not rendered. What am I doing wrong?</p>
  
  <pre><code>&gt; index.js:2178 Warning: validateDOMNesting(...): Text nodes cannot
  &gt; appear as a child of &lt;tbody&gt;.
  &gt;     in tbody (at VendorsPage.js:39)
  &gt;     in table (at VendorsPage.js:31)
  &gt;     in div (at VendorsPage.js:30)
  &gt;     in div (at VendorsPage.js:28)
  &gt;     in VendorsPage (created by Connect(VendorsPage))
  &gt;     in Connect(VendorsPage) (created by Route)
  &gt;     in Route (at App.js:27)
  &gt;     in div (at App.js:22)
  &gt;     in Router (created by BrowserRouter)
  &gt;     in BrowserRouter (at App.js:21)
  &gt;     in div (at App.js:20)
  &gt;     in App (created by Connect(App))
  &gt;     in Connect(App) (at index.js:15)
  &gt;     in Provider (at index.js:14)
  </code></pre>
  
  <p>VendorsPage.js </p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { fetchVendors } from '../actions/index';
  
  class VendorsPage extends Component {
    renderTable() {
      const vendors = this.props.vendors;
      if (vendors) {
        vendors.map((vendor, index) =&gt; {
          console.log(JSON.stringify(vendor));
          return (
            &lt;tr key={vendor._id}&gt;
              &lt;td&gt;{index}&lt;/td&gt;
              &lt;td&gt;{vendor.code}&lt;/td&gt;
              &lt;td&gt;{vendor.name}&lt;/td&gt;
            &lt;/tr&gt;
          );
        });
      }
    }
  
    componentWillMount() {
      this.props.dispatch(fetchVendors());
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Vendors&lt;/h1&gt;
          &lt;div&gt;
            &lt;table&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;#&lt;/th&gt;
                  &lt;th&gt;Code&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {this.renderTable()}
                }
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps({ vendors }) {
    return { vendors };
  }
  
  export default connect(mapStateToProps)(VendorsPage);
  </code></pre>
  
  <p>The console.log() in the renderTable() does print my vendors correctly. I tried removing spaces like some other threads suggested, but that is not the problem. All it prints is below</p>
  
  <p><a href="https://i.stack.imgur.com/RC3bC.png" rel="nofollow noreferrer">Vendors Page</a></p>
  
  <p>Please help..</p>