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>

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?


Answer questions malayladu

Just do what the warning suggests:

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

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!


Related questions

Disable react strict mode on third party libraries hot 6
Refs - &#34;object is not extensible&#34; hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
React@16.9 block `javascript:void(0);` hot 4
TypeError: Object(...) is not a function 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
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
Feedback on useEffect depndencies change error hot 2
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 2
Should have a queue. This is likely a bug in React. Please file an issue hot 2
Github User Rank List