# Nav and Nav Logo is not work correctly?

**URL:** <https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564>\
**Category:** Feedback\
**Tags:** visual-editor, nextjs\
**Created:** [November 29, 2023, 2:45am UTC](https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564 "2023-11-29T02:45:51Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![xbrandonpowell](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/xbrandonpowell/32/3146_2.png) [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)\
**Post date:** [November 29, 2023, 2:45am UTC](https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564/1 "2023-11-29T02:45:51Z")

</div>

Within our NavItem and imageData, we have set up the prop for both the Nav Logo and Nav Listing but we still getting no logo or no Nav list to show up.

```auto
Builder.registerComponent(Nav, {
  name: "Navigation",
  inputs: [
    {
      name: "UploadLogo",
      type: "file",
      image:
        "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2F32e07efa314c4b2382aabc318c1c84b8",
      defaultValue: "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2F32e07efa314c4b2382aabc318c1c84b8",
    },

    {
      name: "NavColumns",
      type: "list",
      label: "Columns",
      subFields: [
        {
          name: "NavItem",
          type: "text",
        },
        {
          name: "NavUrl",
          type: "url",
        },
      ],
    },

    {
      name: "NavIcons",
      type: "list",
      label: "Columns",
      subFields: [
        {
          name: "Icon",
          type: "file",
        },
        {
          name: "PageTitle",
          type: "text",
        },
        {
          name: "IconUrl",
          type: "url",
        },
      ],
    },
  ],
});

```

But for the Nav Icons, we were successful in getting those Icons to show up on the page but I want someone to review my code and give feedback.

See if my eyes are missing something that I do not see in my code.

```auto
import * as React from "react";
//import Cart from "../eCommerces/Notifications/Cart/cart";
import "../Navbar/navbar-style.css";

function Image({ src, alt }) {
  // eslint-disable-next-line @next/next/no-img-element
  return <img 
      src={src} 
      alt={alt} 
    />;
}

const Nav = ({ navItems, imageData, NavIcons }) => {

  return (
  <div className="container">
    <div className="wrapper">
        <div className="main-navbar">
        {imageData && imageData.length > 0 ? (
          <div className="Nav-Logo">
            {imageData (
              <a href="/">
                <Image
                  src={UploadLogo}
                  alt="Main Logo"
                />
              </a>
            )}
          </div>
          ) : (
          <p>No Nav Logo Available</p>
        )}
        
        {navItems && navItems.length > 0 ? (
            <div className="navbar-middle">
              {navItems.map((navlist, index) => (
                <a key={index} href={navlist.NavUrl}>
                  {navlist.NavItem}
                </a>
              ))}
            </div>
            ) : (
            <p>No Nav Listing Available</p>
        )}

          <div className="navbar-last">
              {NavIcons && NavIcons.length > 0 ? (
                  <ul>
                    {NavIcons.map((icon, index) => (
                      <li key={index}>
                        <a href={icon.IconUrl}>
                          <img src={icon.Icon} alt="Icon" />
                        </a>
                      </li>
                    ))}
                  </ul>
                  ) : (
                <p>No Icons Available</p>
              )}
          </div>
            {/* This is help page */}
      </div>
    </div>
  </div>
  );
}

export default Nav;

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [November 29, 2023, 3:46pm UTC](https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564/2 "2023-11-29T15:46:28Z")

</div>

Hello @xbrandonpowell,

The issue seems to be with the props name, so in your Nav component you are receiving props as `{ navItems, imageData, NavIcons }` however, in builder you are registering component with name “UploadLogo” as file type, “NavColumns” as list type and “NavIcons” as list type therefore only “NavIcons” as props received correctly in your Nav component

To fix kindly update the code as below

```auto
import React from 'react'; // Make sure to import React

const Nav = ({ UploadLogo, navItems, NavIcons }) => { // Fix parameter name and import React

  return (
    <div className="container">
      <div className="wrapper">
        <div className="main-navbar">
          {UploadLogo ? ( // Fix conditional rendering
            <div className="Nav-Logo">
              <a href="/">
                <img
                  src={UploadLogo}
                  alt="Main Logo"
                />
              </a>
            </div>
          ) : (
            <p>No Nav Logo Available</p>
          )}

          {navItems && navItems.length > 0 ? (
            <div className="navbar-middle">
              {navItems.map((navlist, index) => (
                <a key={index} href={navlist.NavUrl}>
                  {navlist.NavItem}
                </a>
              ))}
            </div>
          ) : (
            <p>No Nav Listing Available</p>
          )}

          <div className="navbar-last">
            {NavIcons && NavIcons.length > 0 ? (
              <ul>
                {NavIcons.map((icon, index) => (
                  <li key={index}>
                    <a href={icon.IconUrl}>
                      <img src={icon.Icon} alt="Icon" />
                    </a>
                  </li>
                ))}
              </ul>
            ) : (
              <p>No Icons Available</p>
            )}
          </div>
          {/* This is help page */}
        </div>
      </div>
    </div>
  );
}

export default Nav; // Export the component

```

```auto
Builder.registerComponent(Nav, {
  name: "Navigation",
  inputs: [
    {
      name: "UploadLogo",
      type: "file",
      image:
        "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2F32e07efa314c4b2382aabc318c1c84b8",
      defaultValue: "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2F32e07efa314c4b2382aabc318c1c84b8",
    },

    {
      name: "navItems",
      type: "list",
      label: "Columns",
      subFields: [
        {
          name: "NavItem",
          type: "text",
        },
        {
          name: "NavUrl",
          type: "url",
        },
      ],
    },

    {
      name: "NavIcons",
      type: "list",
      label: "Columns",
      subFields: [
        {
          name: "Icon",
          type: "file",
        },
        {
          name: "PageTitle",
          type: "text",
        },
        {
          name: "IconUrl",
          type: "url",
        },
      ],
    },
  ],
});

```

---

<div class="post-metadata">

**Author:** ![xbrandonpowell](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/xbrandonpowell/32/3146_2.png) [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)\
**Post date:** [November 29, 2023, 8:19pm UTC](https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564/3 "2023-11-29T20:19:27Z")

</div>

Thank Manish,

I have tried to see if I could debug my and I tried so many attempts to see if I could fix the nav listing on my own to give a challenge but still cannot figure out:

This is my attempt to figure out how to pull the data right now NavItem getting an undefined error message that shows the code.

```auto
          {NavItem ? (
              <div className="navbar-middle">
                {NavItem.map(( index) => (
                  <li key={index}>
                    <a href={NavUrl}>
                      {NavItem}
                    </a>
                  </li>
                ))}
              </div>
              ) : (
              <p>No Nav Listing Available</p>
          )}

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [November 30, 2023, 5:11am UTC](https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564/4 "2023-11-30T05:11:44Z")

</div>

Hello @xbrandonpowell,

The NavItem map is incorrect, you will need to map navItems.map

e.g.

```auto
          {navItems && navItems.length > 0 ? (
            <div className="navbar-middle">
              {navItems.map((navlist, index) => (
                <a key={index} href={navlist.NavUrl}>
                  {navlist.NavItem}
                </a>
              ))}
            </div>
          ) : (
            <p>No Nav Listing Available</p>
          )}

```

---

<div class="post-metadata">

**Author:** ![xbrandonpowell](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/xbrandonpowell/32/3146_2.png) [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)\
**Post date:** [November 30, 2023, 2:44pm UTC](https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564/5 "2023-11-30T14:44:02Z")

</div>

That was first attemted then I did console.log() `{console.log('navItems:', navItems)}` from I looked in console saw that there was no data be called.

With an navItems: undefined so NavItem is not getting the list of navItems or the NavUrl or the text now going to see if there something doing wrong.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [November 30, 2023, 2:47pm UTC](https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564/6 "2023-11-30T14:47:23Z")

</div>

Hello @xbrandonpowell,

Could you please share the complete code again?

---

<div class="post-metadata">

**Author:** ![xbrandonpowell](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/xbrandonpowell/32/3146_2.png) [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)\
**Post date:** [November 30, 2023, 4:07pm UTC](https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564/7 "2023-11-30T16:07:26Z")

</div>

> [@xbrandonpowell](#):
>
> {console.log(‘navItems:’, navItems)}

```auto
          {console.log('navItems:', navItems)}
          {navItems && navItems.length > 0 ? (
              <div className="navbar-middle">
                {navItems.map((navlist, index) => (
                  <a key={index} href={navlist.NavUrl}>
                    {navlist.NavItem}
                  </a>
                ))}
              </div>
              ) : (
              <p>No Nav Listing Available</p>
            )}

```

---

<div class="post-metadata">

**Author:** ![xbrandonpowell](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/xbrandonpowell/32/3146_2.png) [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)\
**Post date:** [November 30, 2023, 4:15pm UTC](https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564/8 "2023-11-30T16:15:33Z")

</div>

What I think Manish is by looking at the JSON file in [builder.io](http://builder.io) thinks it is not the navItem but the NavColumns you can send from the brackets that the beginning brackets all the JSON of the NavItem and NavUrl are house inside of NavColumns:

Maybe that is why the data of the JSON is not shown because we calling navItems what do you say about that? and what are your thoughts on that?

 ![Screenshot 2023-11-30 at 11.09.48 AM (2)](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/4703508c31b4a0641295df2e3427265344bea060.png)

---

<div class="post-metadata">

**Author:** ![xbrandonpowell](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/xbrandonpowell/32/3146_2.png) [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)\
**Post date:** [November 30, 2023, 4:17pm UTC](https://forum.builder.io/t/nav-and-nav-logo-is-not-work-correctly/4564/9 "2023-11-30T16:17:13Z")

</div>

We did @manish-sharma look at that we both good teammates. When I was in [builder.io](http://builder.io) I was having a hard time trying to locate the JSON file where I could see the data structure but now find out was very hard task to find it but we got now.