profile
viewpoint

Ask questionsWarning: validateDOMNesting(...): <tr> cannot appear as a child of <table>

Using react and react-dom v0.14.3. Have a component which renders:

 <table style={tableStyle}>
       <tr style={rowStyle}>
           <td style={leftColumnStyle}>Battery</td>
           <td><StatsBar/></td>
        </tr>
        ...
  </table>

Getting an error message in console: Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>. See ProductDetails > table > tr. Add a <tbody> to your code to match the DOM tree generated by the browser.

Any ideas why?

facebook/react

Answer questions malayladu

Just do what the warning suggests:

<table style={tableStyle}>
   <tbody>
       <tr style={rowStyle}>
           <td style={leftColumnStyle}>Battery</td>
           <td><StatsBar/></td>
        </tr>
   </tbody>
</table>

Browsers need the <tbody> tag. If it is not in your code, then the browser will automatically insert it. This will work fine on first render, but when the table gets updated, then the DOM tree is different from what React expects. This can give strange bugs, therefore React warns you to insert the <tbody>. It is a really helpful warning.

It helped. Thanks!

useful!
source:https://uonfu.com/
answerer
Malay Ladu malayladu Icegram Mumbai malayladu.com Full stack engineer. Passionate about solving problems. PHP, Wordpress, NodeJS, React, REST API, Microservices, Open source love
Github User Rank List