Unhandled Error Trying to Run Multi Children

Answered

WhyFencePost (Ping Reply) posted this in #help-forum

2024-06-21T02:30:47.146Z

I have a navbar component, and it takes children and uses it twice. This seems to throw this error:

Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead.

Secondly idk what to put for type for the children parameters.

The code in question:

export function NavBar(children : any){
    return (
        <div className="w-full h-dvh">
            <DesktopNav>{children}</DesktopNav>
            <MobileNav>{children}</MobileNav>
        </div>
    );
}

function MobileNav(children : any, className? : any){
    return (
        <div className={"w-full h-full block md:hidden " + className}>
            <div className="w-full h-[10%] bg-green-500">
                
            </div>
            <div className="w-full h-[90%] overflow-x-hidden overflow-y-scroll">
                {children}
            </div>
        </div>
    );
}

function DesktopNav(children : any, className? : any){
    return (
        <div className={"w-full h-full hidden md:block " + className}>
            <div className="w-full h-[10%] bg-green-500">
                
            </div>
            <div className="w-full h-[90%] overflow-x-hidden overflow-y-scroll">
                {children}
            </div>
        </div>
    );
}

Its usage:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className + " w-full h-screen"}>
        <ThemeProvider
              attribute="class"
              defaultTheme="dark"
              enableSystem
              disableTransitionOnChange
        >
        <NavBar>{children}</NavBar>
        </ThemeProvider>
      </body>
    </html>
  );
}

Answered by joulev

wrong syntax.

export function NavBar({ children }: { children: React.ReactNode }){
    return (
        <div className="w-full h-dvh">
            <DesktopNav>{children}</DesktopNav>
            <MobileNav>{children}</MobileNav>
        </div>
    );
}

function MobileNav({ children, className }: { children: React.ReactNode, className?: string }){
    return (
        <div className={"w-full h-full block md:hidden " + className}>
            <div className="w-full h-[10%] bg-green-500">
                
            </div>
            <div className="w-full h-[90%] overflow-x-hidden overflow-y-scroll">
                {children}
            </div>
        </div>
    );
}

function DesktopNav({ children, className }: { children: React.ReactNode, className?: string }){
    return (
        <div className={"w-full h-full hidden md:block " + className}>
            <div className="w-full h-[10%] bg-green-500">
                
            </div>
            <div className="w-full h-[90%] overflow-x-hidden overflow-y-scroll">
                {children}
            </div>
        </div>
    );
}

also dont use any

View full answer

2 Replies

@WhyFencePost (Ping Reply) I have a navbar component, and it takes children and uses it twice. This seems to throw this error: `Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead.` Secondly idk what to put for type for the children parameters. The code in question: tsx export function NavBar(children : any){ return ( <div className="w-full h-dvh"> <DesktopNav>{children}</DesktopNav> <MobileNav>{children}</MobileNav> </div> ); } function MobileNav(children : any, className? : any){ return ( <div className={"w-full h-full block md:hidden " + className}> <div className="w-full h-[10%] bg-green-500"> </div> <div className="w-full h-[90%] overflow-x-hidden overflow-y-scroll"> {children} </div> </div> ); } function DesktopNav(children : any, className? : any){ return ( <div className={"w-full h-full hidden md:block " + className}> <div className="w-full h-[10%] bg-green-500"> </div> <div className="w-full h-[90%] overflow-x-hidden overflow-y-scroll"> {children} </div> </div> ); } Its usage: tsx export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className + " w-full h-screen"}> <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange > <NavBar>{children}</NavBar> </ThemeProvider> </body> </html> ); }

joulev

2024-06-21T04:56:44.052Z

wrong syntax.

export function NavBar({ children }: { children: React.ReactNode }){
    return (
        <div className="w-full h-dvh">
            <DesktopNav>{children}</DesktopNav>
            <MobileNav>{children}</MobileNav>
        </div>
    );
}

function MobileNav({ children, className }: { children: React.ReactNode, className?: string }){
    return (
        <div className={"w-full h-full block md:hidden " + className}>
            <div className="w-full h-[10%] bg-green-500">
                
            </div>
            <div className="w-full h-[90%] overflow-x-hidden overflow-y-scroll">
                {children}
            </div>
        </div>
    );
}

function DesktopNav({ children, className }: { children: React.ReactNode, className?: string }){
    return (
        <div className={"w-full h-full hidden md:block " + className}>
            <div className="w-full h-[10%] bg-green-500">
                
            </div>
            <div className="w-full h-[90%] overflow-x-hidden overflow-y-scroll">
                {children}
            </div>
        </div>
    );
}

also dont use any

Answer

WhyFencePost (Ping Reply)OP

2024-06-21T05:37:42.412Z

can someone mark that as solution, my internet is so bad i cant