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!

Related questions

Disable react strict mode on third party libraries hot 3
Warning: Unknown DOM property for. Did you mean htmlFor? hot 2
React@16.9 block `javascript:void(0);` hot 2
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 1
TypeError: Object(...) is not a function hot 1
useEffect causes 'callback is not a function' exception hot 1
DevTools: Updating state or props in devtools does not trigger component update. hot 1
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component hot 1
eslint-plugin-react-hooks v2.0.0 is not loaded correctly. hot 1
Old references retained by memoizedProps in fiber hot 1
Stale values for useState inside callback functions hot 1
ReactDomServer - renderToString Failing with Context Provider on IE11 hot 1
Keep getting `TypeError: Cannot read property 'scrollTop' of null` in a custom hook... hot 1
Route based code splitting, Loading chunk 0 failed after new deployment hot 1
map through connected component, get data of last saga call within all componenets hot 1
Github User Rank List