0

I know how to fix this error in the code. However I cant seem to find where its coming from.

I looked everywhere in EmployeeProfile and main. Though I cant seem to find it.

I also tried this in the console document.querySelectorAll('ul tr') in chrome. Through it returned nothing

react-dom.development.js:88 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <ul>.
in tr (created by main)
in ul (created by main)
in div (created by main)
in div (created by main)
in div (created by main)
in div (created by main)
in main (created by EmployeeProfile)
in div (created by EmployeeProfile)
in div (created by EmployeeProfile)
in div (created by EmployeeProfile)
in div (created by EmployeeProfile)
in div (created by EmployeeProfile)
in EmployeeProfile (created by Connect(EmployeeProfile))
in Connect(EmployeeProfile) (created by Context.Consumer)
in Route (created by subscriptionroute)
in Switch (created by subscriptionroute)
in subscriptionroute (created by Context.Consumer)
in Route (created by DefaultLayout)
in div (created by DefaultLayout)
in div (created by DefaultLayout)
in DefaultLayout (created by Context.Consumer)
in withRouter(DefaultLayout) (created by Connect(withRouter(DefaultLayout)))
in Connect(withRouter(DefaultLayout)) (created by Context.Consumer)
in Route (created by AuthRoute)
in AuthRoute (created by Connect(AuthRoute))
in Connect(AuthRoute) (created by App)
in Switch (created by App)
in Provider (created by App)
in App (created by Context.Consumer)
in withRouter(App) (created by Connect(withRouter(App)))
in Connect(withRouter(App)) (created by Context.Consumer)
in Route (created by MainApp)
in Switch (created by MainApp)
in Router (created by BrowserRouter)
in BrowserRouter (created by MainApp)
in MainApp
in Provider

I am also getting this error that I am having trouble finding and fixing. I think I may have found the location, though entering a key does not fix the issue, so I am thinking maybe its not the right spot?

enter image description here

enter image description here

enter image description here

enter image description here

I basically just need help on how to locate the offending line of code. Is there some js I can use to find it? Such as document.querySelectorAll('ul tr')?

Aaron
  • 121
  • 11
  • 1
    There can't be that many `` elements in your code. Find them using a plain old file search and find where they're being used. Keep in mind, you may have wrapped them in some other component – Phil Dec 08 '22 at 01:08
  • 1
    Eg, in VSCode use _Edit -> Find in Files_ and search for ` – Phil Dec 08 '22 at 01:10
  • I found it, though I have another warning which is Warning: Each child in a list should have a unique "key" prop. in div (created by main5) in main5 (created by EmployeeProfile) Which is going to be a lot harder because there are sooo many divs. That is why I am trying to see if there is an easier way to find the offending lines for the warnings – Aaron Dec 08 '22 at 01:28
  • 1
    That's an easy one. Look for any iteration code, usually something using `.map()`. See [Understanding unique keys for array children in React.js](https://stackoverflow.com/q/28329382/283366) – Phil Dec 08 '22 at 01:33
  • Thank you, I think I may have found the spot, though it already had a key. I updated the question to show you – Aaron Dec 08 '22 at 01:47

0 Answers0