ValidateDOMNesting(...): Cannot Appear As A Child Of

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs validateDOMNesting(...): <tr> cannot appear as a child of <div> Ask Question Asked 8 years, 1 month ago Modified 3 years, 1 month ago Viewed 116k times 38

I'm trying to get this work:

Orders:

render () { const orders = this.state.orders.map((order, index) => <OrderRow order={order} key={index}/>); return ( <table> <tbody> {orders} </tbody> </table> ); }

OrderRow:

render () { return ( <tr> <td>{this.props.order.number}</td> <td>{this.props.order.products}</td> <td>{this.props.order.shippingDate}</td> <td>{this.props.order.status}</td> </tr> ); }

But still getting this error:

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. See Orders > div > OrderRow > tr.

Any ideas how to fix it?

• javascript
• reactjs

Share Improve this question Follow edited Oct 4, 2021 at 14:52 Audwin Oyong 2,53633 gold badges1919 silver badges3636 bronze badges asked Oct 7, 2016 at 11:00 BodzioBodzio 2,52022 gold badges2020 silver badges3737 bronze badges 8

• 1 inside a table you cannot have a div in between any of these table, thead, tbody, tr, td . you can however have div's inside the td make sure your HTML follows this . – Rajshekar Reddy Commented Oct 7, 2016 at 11:06
• But where is this <div> inside of my code?? – Bodzio Commented Oct 7, 2016 at 11:07
• The error message says so. And even i cannot see a possible div in the above code. If this is the complete code then its weird. – Rajshekar Reddy Commented Oct 7, 2016 at 11:09
• Doesn't show up when I do it in this fiddle: jsfiddle.net/v9whLm5w/1 – Kris Selbekk Commented Oct 7, 2016 at 11:19
• No, it's working... – Bodzio Commented Oct 7, 2016 at 11:21

| Show 3 more comments

5 Answers 5

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 41

Wrap your OrderRow <tr> in <tbody> as explained in issue here, 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>.

OrderRow

render () { return ( <table> <tbody> <tr> <td>{this.props.order.number}</td> <td>{this.props.order.products}</td> <td>{this.props.order.shippingDate}</td> <td>{this.props.order.status}</td> </tr> </tbody> </table> ); } Share Improve this answer Follow edited Oct 4, 2021 at 17:58 Audwin Oyong 2,53633 gold badges1919 silver badges3636 bronze badges answered May 27, 2017 at 14:05 Arpit AggarwalArpit Aggarwal 29.2k1616 gold badges9595 silver badges110110 bronze badges 1

• 17 he is wrapping his tr in a tbody. this does not answer the question. – Skäggiga Mannen Commented Jun 26, 2020 at 18:00

Add a comment | 6

Something like this:

render() { return ( <table> <tbody> {this.state.orders.map((order, index) => { <tr index={index}> <td>{order.number}</td> <td>{order.products}</td> <td>{order.shippingDate}</td> <td>{order.status}</td> </tr> })} </tbody> </table> ); }

Share Improve this answer Follow edited Oct 5, 2021 at 9:48 Audwin Oyong 2,53633 gold badges1919 silver badges3636 bronze badges answered Oct 7, 2016 at 11:28 shpyoshpyo 22111 silver badge66 bronze badges Add a comment | 4

Or more elegant:

render () { return ( <table> <tbody> {this.state.orders.map((order, index) => ( return (<OrderRow order={order} key={index} />); )} </tbody> </table> ); }

Share Improve this answer Follow edited Oct 9, 2021 at 1:50 Audwin Oyong 2,53633 gold badges1919 silver badges3636 bronze badges answered Oct 7, 2016 at 11:34 shpyoshpyo 22111 silver badge66 bronze badges 1

• It appears that it was all fault of webpack-dev-server, when building with simple webpack command, everything works as expected. – Bodzio Commented Oct 7, 2016 at 11:58

Add a comment | 0

It renders tr into div, so use .map() instead :)

Share Improve this answer Follow edited Oct 8, 2021 at 21:37 Audwin Oyong 2,53633 gold badges1919 silver badges3636 bronze badges answered Oct 7, 2016 at 11:23 MToMTo 40655 silver badges1313 bronze badges 1

• 1 It appears that it was all fault of webpack-dev-server, when building with simple webpack command, everything works as expected. – Bodzio Commented Oct 7, 2016 at 11:57

Add a comment | 0

Could you try something more automatic?

render() { return ( <table> <tbody> {this.state.orders.map((order, index) => { <tr index={index}> {Object.keys(order).map(function(key,id) { return (<td key={id}>{order[key]}</td>) })} </tr> }} </tbody> </table> ); } Share Improve this answer Follow edited Oct 9, 2021 at 1:43 Audwin Oyong 2,53633 gold badges1919 silver badges3636 bronze badges answered Sep 6, 2021 at 17:54 Julio Ricardo GutierrezJulio Ricardo Gutierrez 111 bronze badge Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• javascript
• reactjs

or ask your own question.

• The Overflow Blog
• We'll Be In Touch - A New Podcast From Stack Overflow!
• The app that fights for your data privacy rights
• Featured on Meta
• More network sites to see advertising test
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Linked

0 validateDOMNesting(...): <p> cannot appear as a descendant of <p>

Related

82 React: validateDOMNesting: #text cannot appear as a child of <tr> 22 React: <tr> cannot appear as a child of <td>. See Comment > td > tr 15 Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody> 19 React <div> cannot appear as a child of <tr> Warning 2 Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr> using React-bootstrap 0 Warning: validateDOMNesting(...): <table> cannot appear as a child of <tr> 0 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <form> 6 How to deal with "Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. " when using react-window to render table rows 1 React: Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tr> 3 validateDOMNesting(...): <tr> cannot appear as a child of <div> problem

Hot Network Questions

• Why the second C in "recyceln" is pronounced [k] instead of [ts]?
• Help me identify this chip (8 pins)
• A linked list in C, as generic and modular as possible, for my personal util library
• Polynomial.java - A tiny Java library for dealing with polynomials with double coefficients
• Chain skipping when pedaling hard
• Why doesn't Hotelling's law seem to apply to the stances taken by political parties?
• What comic is this where Superman was controlled by rock music?
• Movie / TV show where main character has a metallic skull
• Could air traffic control radars pick up a large stationary floating object?
• "Your move, bud."
• Can I pretend that Spearman's = Pearson's correlation coefficients for meta analysis?
• When SG-1 arrives in 1969, why is it initially an "empty" gate room?
• Can a microwave antenna detect single microwave photons?
• Unconvinced by a standard step in deriving Maxwell-Ampère's law from Biot and Savart's law
• Suggestion for catching a flight with short layover in Amsterdam
• What are the ethical considerations regarding mandatory class participation?
• Is it a Db9 with a #11 or a D with a b9 and a #11?
• What is someone to do if they inherited a laptop containing illegal images
• FindInstance and Integers option
• Can one be immortal then not immortal?
• Aeschylus quote about wind, sea, skies and sun rays
• How would Merfolk make a solar oven
• Could you make a quadcopter whose propellers can also work as wheels?
• Girls and boys parades

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-js