Cannot read property of undefined

[rare oar]

Hi, i am a noob in next js and react, and i am trying to connect menu drupal to my nextjs app.
I have an issue with :
Here the code of my layout : TypeError: Cannot read property 'main' of undefined
I don't understand why, and what i do wrong.
If you can help me, will be great 🙂
Thanks all.

import * as React from "react"
import Link from "next/link"

import { PreviewAlert } from "components/preview-alert"
import { MenuMain } from "components/menu-main"
import { DrupalMenuLinkContent } from "next-drupal"

export interface LayoutProps {
menus: {
main: DrupalMenuLinkContent[]
}
}

export function Layout({ menus, children, ...props }: LayoutProps) {

return (
<>
<PreviewAlert />
<div className="max-w-screen">
<header>

      <MenuMain items={menus.main} />
    </header>
    <main className="container py-10 mx-auto">{children}</main>
  </div>
</>

)
}

[uneven ivy]

Try {menus && <MenuMain items={menus.main} />}
or early return if no menus are present above the return if (!menus) { return null };

[rare oar]

Thanks that solve the issue, but i don't understand why menus is undefined 🙂

[uneven ivy]

At first render menus is undefined, afterwards the data is hydrated and menus are "filled". So you are telling the code to only execute when menu data is really there. You will use this method a lot in future. Happy coding 🙂

[rare oar]

Thanks 🙂 i will check on it