Next.js Discord

Discord Forum

Problem With Conditional Render

Unanswered
VoidPointer posted this in #help-forum
Open in Discord
VoidPointerOP
I'm busy with a shacn NavigationMenu, and am trying to avoid showing the little down arrow icon on top level menu items that have no sub-items, and so far I have this:
{items.map((item) => (
    <NavigationMenuItem key={crypto.randomUUID()}>
        <NavigationMenuTrigger>{item.text}</NavigationMenuTrigger>
        {item.subItems && item.subItems.length > 0 && (
            <NavigationMenuContent>
                <ul className="grid w-50 gap-4">
                    <!-- <Link> stuff here -->
                </ul>
            </NavigationMenuContent>)}
        {(!item.subItems || item.subItems.length === 0) && (
            <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
                <Link href={getWorkingUrl(item.url)}>{item.text}</Link>
            </NavigationMenuLink>
        )}
    </NavigationMenuItem>
))}

My items are defined as a TypeScript array:
[
  {
    text: "Contact Us",
    subItems: [ 
      {
        text: "Request a Quote",
      },
      ...
    ],
  },
  {
    text: "Sign Up",
    url: "/signup",
  },
];

Yet even for the /signup item in this case, with no subItems defined, both conditionals get rendered.

7 Replies

Haddock
You need to conditioanlly render the trigger itself, not just the content.
Thai
^
Threw this into AI which gave me this:

{items.map((item) => {
const hasSubItems = (item.subItems?.length ?? 0) > 0

return (
<NavigationMenuItem key={item.url ?? item.text}>
{hasSubItems ? (
#Unknown Channel
<NavigationMenuTrigger>{item.text}</NavigationMenuTrigger>

<NavigationMenuContent>
<ul className="grid w-50 gap-4">
{/* <Link> stuff here */}
</ul>
</NavigationMenuContent>
</>
) : (
<NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
<Link href={getWorkingUrl(item.url)}>{item.text}</Link>
</NavigationMenuLink>
)}
</NavigationMenuItem>
)
})}
Haddock
{items.map((item) => (
  <NavigationMenuItem key={item.text}>
    {item.subItems?.length ? (
      <>
        <NavigationMenuTrigger>
          {item.text}
        </NavigationMenuTrigger>

        <NavigationMenuContent>
          <ul className="grid w-50 gap-4">
            {/* sub item links */}
          </ul>
        </NavigationMenuContent>
      </>
    ) : (
      <NavigationMenuLink
        asChild
        className={navigationMenuTriggerStyle()}
      >
        <Link href={getWorkingUrl(item.url)}>
          {item.text}
        </Link>
      </NavigationMenuLink>
    )}
  </NavigationMenuItem>
))}
Try sth like this.
VoidPointerOP
Great! Thanks so much. I didn't know you could do ternaries in tsx.