为什么我不能在 React 中使用 JSX 将 tbody 标签嵌套在 div 标签中？

Question

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.

My code:

<div>
  <tbody>
    <tr>
      <td>{this.props.someData}</td>
    </tr>
    <tr>
      <td>{this.props.moreData}</td>
    </tr>
  </tbody>
</div>

React is throwing this error: ValidateDOMNesting(...): cannot appear as a child of div

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?

Answer 1

Your problem is an HTML one. To make a table, the table body has to be inside the <table> tag:

<table>
  <tbody>
  ...
  </tbody>
...
</table>

Answer 2

No table tag works without tag. should be under like :

<table>
<tbody>
    <tr>
      <td>{this.props.someData}</td>
    </tr>
    <tr>
      <td>{this.props.moreData}</td>
    </tr>
  </tbody>
</table>