How to get rid of the this warning: "Warning: validateDOMNesting(…)"?

  javascript, reactjs

I am trying to implement a functional component in my react app:
https://gist.github.com/andreisamoila74/bca55271c3992c079eed018e5c95a1be
And these are the warnings:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ViewCode`
    in Fragment
    in ViewCode (at App.js:87)
    in Route (at App.js:86)
    in Switch (at App.js:72)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Content (at App.js:71)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at App.js:68)
    in App (at src/index.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:12)
    in Suspense (at src/index.js:11)
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
    in tr (at View.js:49)
    in div (at View.js:48)
    in tbody (at View.js:93)
    in table (at View.js:92)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at View.js:91)
    in div (at View.js:90)
    in ViewCode (at App.js:87)
    in Route (at App.js:86)
    in Switch (at App.js:72)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Content (at App.js:71)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at App.js:68)
    in App (at src/index.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:12)
    in Suspense (at src/index.js:11)
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>.
    in div (at View.js:48)
    in tbody (at View.js:93)
    in table (at View.js:92)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at View.js:91)
    in div (at View.js:90)
    in ViewCode (at App.js:87)
    in Route (at App.js:86)
    in Switch (at App.js:72)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Content (at App.js:71)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at App.js:68)
    in App (at src/index.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:12)
    in Suspense (at src/index.js:11)

I understand each warning, but I am not sure how I can get rid of its. Regarding the table, I need those divs so my AddComment component is placed in the right way. How should I solve this? Thanks 🙂

Source: Ask Javascript Questions

LEAVE A COMMENT