Nav and Nav Logo is not work correctly?

General Feedback
,
1

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.

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.

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;
2

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

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


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",
        },
      ],
    },
  ],
});
1 Like
3

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.

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

Hello @xbrandonpowell,

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

e.g.

          {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>
          )}
5

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.

6

Hello @xbrandonpowell,

Could you please share the complete code again?

7 
          {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>
            )}
8

What I think Manish is by looking at the JSON file in 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)
Screenshot 2023-11-30 at 11.09.48 AM (2)1360×768 143 KB

9

We did @manish-sharma look at that we both good teammates. When I was in 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.

1 Like