Hi, I am getting a hydration error and I am hella confused on why. I dont see any incorrect tsx here

I am trying to make a table but for some reason im getting a hydration error on this one page
15 Replies
Valhalaar
Valhalaar2y ago
You're just hard coding these timestamps for now, right? 03:04:05 GMT I'm assuming you are since this isn't html output this is actual source code I don't see anything that immediately jumps out at me. You're not doing any kinda render null on the server, render ... on the client type stuff is this whole Links component conditionally rendered?
jack
jack2y ago
i had an issue yesterday where if you're improperly nesting html tags it will yell at you about hydration for example, i think i accidentally put a div inside of a p tag not sure if that's what youre doing, but that caused me like 1hr of debugging yesterday in case it helps
Valhalaar
Valhalaar2y ago
oh lol i didn't know about that one that's good to be aware of
tropic
tropicOP2y ago
Its just a [;ace holder fot the time being im just templating the frontend before I put in any business logic No its the page actually WHich is why im hella confused I dont see anything wrong here
tropic
tropicOP2y ago
After having coffee I found the problem
tropic
tropicOP2y ago
Apparently you cannot put a div in a taable footer good to know
needmorewood
needmorewood2y ago
Does anyone know why? Seems very odd
tropic
tropicOP2y ago
only found it after digging through console sadly next didnt print out the error
tropic
tropicOP2y ago
I am not sure It seems logical enough for it to be able to get put in the table footer it still rendered it on the page is just that next did not like it at all
Valhalaar
Valhalaar2y ago
huh tried a quick google / github search and can't find where validateDOMNesting is defined to see what the source is doing does it work if you nest the div inside a <tr>? so <tfoot><tr><div> ... </div></tr></tfoot>
tropic
tropicOP2y ago
Oh let me see Wasnt thinking of that because before I just added a button or somthing to the table footer never tried a div Doesnt work maybe tr and then td ? ^ That worked hmm
Valhalaar
Valhalaar2y ago
Yeah that idea came from looking at the spec for table elements I’ve honestly never written a table so I don’t know anything about them But the spec mentioned that the footer of a table is expected to contain rows And if rows need td then that makes sense
tropic
tropicOP2y ago
Oh ok did not know that but it makes sense why it would
Valhalaar
Valhalaar2y ago
For reference https://html.spec.whatwg.org/multipage/tables.html#the-tfoot-element This is what led me down that path
Want results from more Discord servers?
Add your server