title: Why can't I nest a tbody tag inside a div tag with JSX in React?
body: <p>I'm a React beginner and I'm working on a project where I'll have a form and as data gets entered a table will be dynamically populated with data from the user.</p>
  
  <p><strong>My code:</strong></p>
  
  <pre><code>&lt;div&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;{this.props.someData}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;{this.props.moreData}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>React is throwing this error: ValidateDOMNesting(...):  cannot appear as a child of div</p>
  
  <p>I tried putting the table inside a new component and then nesting the new component but I have the same problem. Why does JSX not like tables inside of divs? Is there any work-around?</p>