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 ponent and then nesting the new ponent but I have the same problem. Why does JSX not like tables inside of divs? Is there any work-around?

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 ponent and then nesting the new ponent but I have the same problem. Why does JSX not like tables inside of divs? Is there any work-around?

• javascript
• html
• reactjs
• jsx

• 4 Because as the error says TBODY doesn't belong in DIV it goes inside TABLE – Patrick Evans Commented Aug 18, 2017 at 18:04
• 1 You need to put <tbody> within a <table>. – brian17han Commented Aug 18, 2017 at 18:05
• By the way, your question title says "table" tag while your actual question is using a "tbody" – nbkhope Commented Aug 18, 2017 at 18:06
• Error seems to be pretty self explanatory - permitted parents of tbody: developer.mozilla/en-US/docs/Web/HTML/Element/tbody – Adam Jenkins Commented Aug 18, 2017 at 18:06

2 Answers 2

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

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

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>