Unable to get results using map in Nextjs wordpress headless cms

Viewed 26

I am developing headless WordPress with NExtjs. menuItems is props that contain an object. when I console.log(menuItems ) it shows output in the console similar to "const menu" but when I map "menu" it maps perfectly but when I map menuItems, the site gives me the error that it is not defined.

code under className "navi-2" is not working

               <pre>
    import Link from "next/link";

    function NavBar({ menuItems }) {
    console.log(menuItems )
    const menu = {
    "menuItemse": {
        "edges": [
            {
                "node": {
                    "uri": "/",
                    "title": "home link",
                    "target": null,
                    "label": "Home"
                }
            },
            {
                "node": {
                    "uri": "/about-us/",
                    "title": null,
                    "target": null,
                    "label": "About Us"
                }
            },
            {
                "node": {
                    "uri": "/portfolio/",
                    "title": null,
                    "target": null,
                    "label": "Portfolio"
                }
            },
            {
                "node": {
                    "uri": "/services/",
                    "title": null,
                    "target": null,
                    "label": "Services"
                }
            },
            {
                "node": {
                    "uri": "/contact-us/",
                    "title": null,
                    "target": null,
                    "label": "Contact Us"
                }
            }
        ]
    }
    }

    return(
        <> 
        <nav className="navi">
    {menu.menuItemse.edges.map(it => (
    <Link href={it.node.uri}><a>{it.node.label}</a></Link>
) )}
        </nav>

<nav className="navi-2">
    {menuItems.menuItems.edges.map(item => (
    <Link href={item.node.uri}><a>{item.node.label}</a></Link>
) )}
        </nav>
        </>
    )
}

    export default NavBar

</pre>
0 Answers
Related