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...

Visit chat

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

• Dominant chord -- is its definiton super flexible in blues or I spotted a mistake?
• In Catholic atonement theology, if God can save Mary from all sin without Christ, what was the point of Christ's death?
• Is vertex mass the mass of the whole object?
• New 90 TB/10 drive RAID 5 array state: clean, degraded, recovering. Why, and how long will it take to recover?
• USB drives in space?
• Printing clist out, but controlling whether there should be a \nobreakspace after “and”
• What happens to your original form when you lose body parts while under the effect polymorph or alter self?
• Girls and boys parades
• Publishing an article despite the outcomes are not what we wanted
• Understanding Linux 'top' command: Memory vs Swap display format confusion
• Why does the special character `?` need to be escaped in grep, but not `.` or `*`?
• How did the Dutch Republic get sufficient timber to build its navies?
• Movie / TV show where main character has a metallic skull
• Which is larger? 999,999! or 2^(11!)
• How do I publish my book free as a free to read website with webpages?
• Is there a semisimple abelian category or a split abelian category with an infinite number of simple objects?
• How to put the QED symbol of a proof at the right place inside aligned?
• To “digitize” means to turn something into a digital format that was previously not digital. What to call changing one digital format into another?
• Can the Attorney General, with a cooperating president, naturalize all undocumented immigrants?
• How would Merfolk make a solar oven
• logical error probability independent from distance in STIM default repetition code
• Can a microwave antenna detect single microwave photons?
• What is someone to do if they inherited a laptop containing illegal images
• Why the second C in "recyceln" is pronounced [k] instead of [ts]?

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