React not Rendering DOM after Page Redirect
Answered
Japanese littleneck posted this in #help-forum
Japanese littleneckOP
Hey all! I have a really weird bug where I redirect to a page in my dynamic route but for some reason, the DOM isn't updating my table when I navigate to a page with no table rows to a table that has table rows.
For reference, I have a SQLite database configured with the following data:
* 2023-3-3 has no rows
* 2023-5-4 has two rows
* 2023-1-1 has four rows
To reproduce the bug, just click on the 2023-3-3 link and then go to either 5-4 or 1-1. Then go to either 1-1 or 5-4 (whichever one you didn't pick in the last step) and you'll notice that the first two rows from 5-4 took the place of the first two rows in 1-1 or vice versa. The weird thing is changing pages from 5-4 and 1-1 won't encounter the same issue. The issue is always caused by starting at a page with less rows and going to pages with more rows
I've also attached a picture of what the data in my SQLite DB looks like.
Can someone point me in the right direction to figure this out? I think it has something to do with how Next.JS is rendering the client DOM. Thank you for the help!
For reference, I have a SQLite database configured with the following data:
* 2023-3-3 has no rows
* 2023-5-4 has two rows
* 2023-1-1 has four rows
To reproduce the bug, just click on the 2023-3-3 link and then go to either 5-4 or 1-1. Then go to either 1-1 or 5-4 (whichever one you didn't pick in the last step) and you'll notice that the first two rows from 5-4 took the place of the first two rows in 1-1 or vice versa. The weird thing is changing pages from 5-4 and 1-1 won't encounter the same issue. The issue is always caused by starting at a page with less rows and going to pages with more rows
I've also attached a picture of what the data in my SQLite DB looks like.
Can someone point me in the right direction to figure this out? I think it has something to do with how Next.JS is rendering the client DOM. Thank you for the help!
Answered by Japanese littleneck
Just found the solution: If you are maintaining a table with multiple rows, each row must have a key unique to that specific page. I think React doesn't bother updating the DOM unless there's a new key.
1 Reply
Japanese littleneckOP
Just found the solution: If you are maintaining a table with multiple rows, each row must have a key unique to that specific page. I think React doesn't bother updating the DOM unless there's a new key.
Answer