Next.js Discord

Discord Forum

Rendering order seems backwards when passing in JSX

Answered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I'm trying to use the DaisyUI Drawer component for my new website, but I'm running into issues with hydration/rendering.

The following works as expected:
<Drawer>Hello</Drawer>


This is what the drawer component looks like:
const Drawer = ({ children }: DrawerProps) => {
  return (
    <div className="drawer">
      <input id="my-drawer-3" type="checkbox" className="drawer-toggle" />
      <div className="drawer-content flex flex-col">
        <Navbar />
        {children}
      </div>
      <MobileNavigation />
    </div>
  );
};


It fails when I try to pass in the following (from the create-next-app template)
<Drawer>
  <body className={inter.className}>{children}</body>
</Drawer>


I'm getting an error about hydration:
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <html>.


In addition to that, the content between <Drawer> shows up ABOVE the navbar which should be possible... Any suggestions? Image attached for clarity
Answered by West African Lion
This seems to have solved the issue, but I don't understand why. Any help understanding this would be greatly appreicate! Does it have to do with body being a child of a div?

    <html lang="en" data-theme="spcMain">
      <body className={inter.className}>
        <Drawer>{children}</Drawer>
      </body>
    </html>
View full answer

2 Replies

West African LionOP
This seems to have solved the issue, but I don't understand why. Any help understanding this would be greatly appreicate! Does it have to do with body being a child of a div?

    <html lang="en" data-theme="spcMain">
      <body className={inter.className}>
        <Drawer>{children}</Drawer>
      </body>
    </html>
Answer