#Link Text not rendered (JSX, map function)

22 messages · Page 1 of 1 (latest)

nimble carbon
#

I have this Layout.astro: (the only thing that really matters from here is the links array)

---
import "@fontsource/cormorant-garamond";
import "@fontsource/montserrat";
import Navbar from "../components/Navbar.astro";

const { description, title } = Astro.props;
const links = [
  { href: "/despre-noi", text: "Despre noi" },
  {
    href: "/servicii",
    text: "Servicii",
    services: [
      { href: "/gratare-din-caramida", text: "Gratare din caramida" },
      { href: "/sobe-de-teracota", text: "Sobe de teracota" },
    ],
  },
  { href: "/portofoliu", text: "Portofoliu" },
  { href: "/contact", text: "Contact" },
];
---

<html lang="ro">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta
      name="keywords"
      content="gratare din caramida, gratar din caramida, gratare de gradina, gratar de gradina, sobe de teracota, soba de teracota, semineu pe lemne, gratare, caramida, gratar, gradina, sobe, teracota, soba, semineu, lemne"
    />
    <meta name="author" content="Boostado" />
    <meta name="description" content={description} />
    <title>{title}</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/Michal-Skoula/simple-scroll-animations@master/release/latest/styles.css"
    />
    <script
      is:inline
      defer
      src="https://cdn.jsdelivr.net/gh/Michal-Skoula/simple-scroll-animations@master/release/latest/script.js"
    ></script>
  </head>
  <body>
    <Navbar links={links} />
    <main>
      <slot />
    </main>
  </body>
</html>

<script>
  import "preline/dist/preline.js";
</script>```
#

I have this Navbar.astro: (the only thing that matters from here, and were the problem is, is the block with the **map ** functions)

# 
import Image from "astro/components/Image.astro";
import logo from "../assets/logo-navbar.webp";
import Collapse from "./Collapse.astro";
import Link from "./Link.astro";
import Button from "./Button.astro";

const navbar = "navbar";
const dropdown = "dropdown";
const { links } = Astro.props;
---

<header class="sticky top-0 bg-background">
  <nav
    class="container flex items-center py-0.5 max-xl:justify-between md:py-2 xl:gap-x-6 xl:py-1"
  >
    <a href="/">
      <Image
        class="h-8 w-[3.6rem] md:h-10 md:w-[4.5rem] xl:h-12 xl:w-[5.5rem]"
        src={logo}
        alt="TAI Construct - Experti in gratare din caramida si sobe de teracota. Oferim solutii complete pentru amenajari exterioare si interioare, cu accent pe durabilitate si design"
        loading="eager"
      />
    </a>
    <Collapse />
    <ul
      class="hs-collapse hidden w-full max-xl:container max-xl:absolute max-xl:left-0 max-xl:top-full max-xl:h-[33.25rem] max-xl:bg-background max-xl:py-8 xl:flex xl:items-center xl:gap-x-6"
      id={navbar}
    >
      {links.map((link) => (
        <li class="max-xl:mb-4 max-xl:border-b max-xl:border-text/30 max-xl:py-0.5 max-xl:text-center">
          {link.href === "/servicii" ? (
            <Collapse dropdown id={dropdown} text={link.text}/>
            <ul class="hs-collapse hidden" id={dropdown}>
              {link.services.map((service) => (
                <li>
                  <Link href={service.href}>{service.text}</Link>
                </li>
              ))}
            </ul>
          ) : ( 
            <Link href={link.href}>{link.text}</Link>
          )}
        </li>
      ))}
      <li class="max-xl:pt-6 max-xl:text-center xl:ml-auto">
        <Button icon text="Apeleaza-ne" />
      </li>
    </ul>
  </nav>
</header>```
#

Now for some reason, on the browser, all the **li ** item and their **a ** tags gets rendered, but the only **a **tag which has a text is the one with "Servicii". The rest of **a **tags from the **first **map function, and also from the **second **map function are empty. All the elements are rendered in the DOM. I don't know why this is happening

noble marsh
#

Cann you do me a huge favor and wrap your code in triple backticks `

Makes it much easier to read

nimble carbon
#

yes, wait i will edit

noble marsh
#

Not that I think it's causing the issue but that button doesnt appear to need to be inside an li cause its outside the ul

nimble carbon
#

good spot...fixed that:P

dapper acorn
#

Are you using a slot in your Link component?

nimble carbon
#

No

dapper acorn
# nimble carbon No

How else could the LinK display the text you put between the opening and closing tags for the Link?

nimble carbon
#

as a prop

# 
const { href, text } = Astro.props;
---

<a
  class="text-sm text-text transition duration-200 hover:font-semibold hover:text-primary xl:text-lg xl:leading-5"
  href={href}
>
  {text}
</a>
dapper acorn
#

but you're not sending it as a prop: <Link href={link.href}>{link.text}</Link>

#

if you were sending it as a propt it would be: <Link href={link.href} text={link.text} />

nimble carbon
#

omg...what a newbie mistake..

#

spent 2 days on this...

#

thank you so much

dapper acorn
#

You can do it as a prop or add <slot /> to your link component. Either way. GL

nimble carbon
#

if i show you another support ticket of mine from yesterday, can you take a look at that also please?

dapper acorn
#

sure! but no gurantees you know....

nimble carbon
#

fast question...that ticket is closed, but i cant find it anymore...have any idea how can i find it?