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 6
Warning: Unknown DOM property for. Did you mean htmlFor? hot 6
TypeError: Object(...) is not a function
Refs - &#34;object is not extensible&#34;
React@16.9 block `javascript:void(0);`
"DevTools v4 is incompatible with this version of React" with React Native & latest version of React hot 3
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Infinite loop in useEffect using blank object or array hot 2
Error on unit test : Cannot read property 'Symbol(Symbol.iterator)' of undefined hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
Hooks API - hook breaks when exported from module hot 2
Function components do not support contextType. hot 2
source:https://uonfu.com/
Github User Rank List