Unexpected "}" | Astro Lounge | Page 1

halcyon fable Oct 15, 2024, 12:09 AM

#

I have this components:

Layout.astro:
---
import "@fontsource/cormorant-garamond";
import "@fontsource/montserrat";
import cormorantGaramondWoff2 from "@fontsource/cormorant-garamond/files/cormorant-garamond-latin-400-normal.woff2?url";
import montserratWoff2 from "@fontsource/montserrat/files/montserrat-latin-400-normal.woff2?url";
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" />
  </head>
  <body>
    <Navbar links={links} />
    <main>
      <slot />
    </main>
  </body>
</html>```

#

Button.astro:

#

---
const { icon = false, text = "Afla mai multe" } = Astro.props;
---

<a
  class="inline-flex items-center justify-center gap-x-1 rounded-lg bg-primary px-3 py-2 text-sm text-background transition duration-200 hover:bg-primaryHover xl:gap-x-2 xl:px-4 xl:text-lg xl:leading-5"
  href="https://wa.me/+40758358544"
  target="_blank"
>
  {
    icon && (
      <svg
        class="size-4 fill-none stroke-background xl:size-6"
        viewBox="0 0 24 24"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M8 3C8.5 3 10.5 7.5 10.5 8C10.5 9 9 10 8.5 11C8 12 9 13 10 14C10.3943 14.3943 12 16 13 15.5C14 15 15 13.5 16 13.5C16.5 13.5 21 15.5 21 16C21 18 19.5 19.5 18 20C16.5 20.5 15.5 20.5 13.5 20C11.5 19.5 10 19 7.5 16.5C5 14 4.5 12.5 4 10.5C3.5 8.5 3.5 7.5 4 6C4.5 4.5 6 3 8 3Z" />
        <path d="M14 7.04404C14.6608 7.34734 15.2571 7.76718 15.7624 8.27723C16.2546 8.77401 16.6606 9.35636 16.956 10" />
        <path d="M20.748 9C20.3874 7.59926 19.6571 6.347 18.6672 5.3535C17.6704 4.3531 16.4105 3.61507 15 3.25203" />
      </svg>
    )
  }
  {text}
</a>```

#

Link.astro:

#

---
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>```

#

Collapse.astro:

#

---
const { dropdown = false, id = "navbar", text = "" } = Astro.props;
---

<button
  class=`hs-collapse-toggle inline-flex items-center justify-center ${dropdown ? "group gap-x-1 text-sm text-text transition duration-200 hover:font-semibold hover:text-primary xl:gap-x-2 xl:text-lg xl:leading-5": "xl:hidden"}`
  type="button"
  data-hs-collapse=`#${id}`
>
  {dropdown && text}
  {
    dropdown ? (
      <svg
        class="size-4 fill-none stroke-text stroke-2 transition duration-200 group-hover:stroke-primary group-hover:stroke-[3px] xl:size-6"
        viewBox="0 0 24 24"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="m6 9 6 6 6-6" />
      </svg>
    ) : (
      <svg
        class="size-6 fill-none stroke-accent stroke-[4px] hs-collapse-open:hidden md:size-10"
        viewBox="0 0 40 40"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M5 10H35M5 20H35M5 30H35"></path>
      </svg>
      <svg
        class="hidden size-6 fill-none stroke-accent stroke-[4px] hs-collapse-open:block md:size-10"
        viewBox="0 0 40 40"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M10 30L15 25L20 20M30 10L25 15L20 20M30 30L25 25L20 20M10 10L15 15L20 20"></path>
      </svg>
    )
  }
</button>
<ul class=`hs-collapse hidden ${!dropdown && "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={id}>
  <slot />
</ul>```

#

Navbar.astro:

#

---
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 { 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>
      {
        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}>
                {link.services.map((service) => (
                  <li>
                    <Link href={service.href}>{service.text}</Link>
                  </li>
                ))}
              </Collapse>
            ) : (
              <Link href={link.href}>{link.text}</Link>
            )}
          </li>
        ))
      }
    </Collapse>
    <li class="max-xl:pt-6 max-xl:text-center xl:ml-auto">
      <Button icon text="Apeleaza-ne" />
    </li>
  </nav>
</header>```

#

I get this error in browser: Unexpected "}"
components/Navbar.astro:39:194

#

I've been double checking since 2 hours and I don't see any missing or extra syntax...I dont know what to do anymore

keen cove Oct 15, 2024, 12:22 AM

#

make a reproduction on stackblitz

halcyon fable Oct 15, 2024, 12:24 AM

#

Ok...let me check how, I never done this before

#

Brb

#

https://stackblitz.com/~/github.com/catalinurcan9/tai-construct @keen cove

turbid veldt Oct 15, 2024, 12:45 AM

#

You had a bunch of extra curly brackets

    <Collapse>
      {
        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}>
                link.services.map((service) => (
                  <li>
                    <Link href={service.href}>{service.text}</Link>
                  </li>
                ))
              </Collapse>
            ) : (
              <Link href={link.href}>{link.text}</Link>
            )
          </li>
        ))
      }
    </Collapse>

keen cove Oct 15, 2024, 12:45 AM

#

    <Collapse>
      {
        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>
                  {link.services.map((service) => (
                    <li>
                      <Link href={service.href}>{service.text}</Link>
                    </li>
                  ))}
                </ul>
              </Collapse>
            ) : (
              <Link href={link.href}>{link.text}</Link>
            )}
          </li>
        ))
      }
    </Collapse>

#

lol

turbid veldt Oct 15, 2024, 12:46 AM

#

idk why dif is not working

#

Anyway, lloyd posted what you had

#

I changed it to what I had without all the extra curly brackets

#

and it worked fine

keen cove Oct 15, 2024, 12:47 AM

#

You mentioned you worked on it for 2 hours, it should have involved removing the code until the error went away, then you add code back in and then work from there.

halcyon fable Oct 15, 2024, 12:50 AM

#

I dont know how is goona work, because if I do like you did @turbid veldt , my vs code will see link.href === "/servicii" as text...I didnt try it like this because vscode changes to color white, and I thought it sees it like text

turbid veldt Oct 15, 2024, 12:50 AM

#

I won't pretend to understand in depth why it works

But when I did it like that in your stack blitz it worked fine so

#

Do with that what you will 😄

keen cove Oct 15, 2024, 12:51 AM

#

are you using a theme?

halcyon fable Oct 15, 2024, 12:51 AM

#

no...dark modern default them from vs code

keen cove Oct 15, 2024, 12:51 AM

#

got a screenshot?

halcyon fable Oct 15, 2024, 12:55 AM

#

#

now i get another error...same thing with }...

keen cove Oct 15, 2024, 12:56 AM

#

so that is just text

halcyon fable Oct 15, 2024, 12:57 AM

#

Yes...exactly what I was telling you...Matthew said that on stackblitz it worked like this

turbid veldt Oct 15, 2024, 12:58 AM

#

Using the exact code I linked, idk why stack blitz doesnt mind

halcyon fable Oct 15, 2024, 12:59 AM

#

either way, if I do like you say Matthew, It break deeper in the second map with the services...and I also got more errors

turbid veldt Oct 15, 2024, 12:59 AM

#

Understandable

halcyon fable Oct 15, 2024, 1:00 AM

#

keen cove You mentioned you worked on it for 2 hours, it should have involved removing the...

that's exactly what I've been doing for the past 2 hours:) everything I tried same result

keen cove Oct 15, 2024, 1:01 AM

#

right and as I said before quantifying time spent on a problem isnt going to ever make it get fixed faster

halcyon fable Oct 15, 2024, 1:01 AM

#

I ussualy spend a lot of time before reaching for help, and i usually want to understand why this things happen

keen cove Oct 15, 2024, 1:01 AM

#

<div>
    link.href === "..."
</div>

is what you have currently

#

its not an expression, its just text

turbid veldt Oct 15, 2024, 1:02 AM

#

I put it back to the way you originially have it and it still renders fine

#

the error im getting is that service is not defined

#

because only one of your links has a services array

halcyon fable Oct 15, 2024, 1:03 AM

#

keen cove ```html <div> link.href === "..." </div> ``` is what you have currently

I mean I've worked with Svelte and SvelteKit before...I'm not that newbie with ui framewroks...I also worked a little with react...this should work...my question is...isnt possible to write more jsx like code in an already existing jsx like code? Or it has something to do with the slot from the collapse component?

#

Also another tricky thing...

#

if you check my collapse component

#

I have 2 jsx syntax...a small one with dropdown && text and the big one

turbid veldt Oct 15, 2024, 1:03 AM

#

But it's checking all 4 of them for some reason

halcyon fable Oct 15, 2024, 1:04 AM

#

for some reason, I cant put the text prop inside the big {} from the collapse...that's why I've made another block

halcyon fable Oct 15, 2024, 1:08 AM

#

turbid veldt because only one of your `links` has a services array

it shouldnt metter...my links array is an array of objects...I have conditional logic to check for something and only then itterate to the services array. Im 100% sure is not from there...this is basic vanilla js. I think it has something to do with 1 of these 3 things:

#

1: on the collapse component, i cant put the text prop inside the big {} code of block, and I had to make another small one for that ( {dropdown && text} )

#

Maybe is not possible to write jsx like syntax in an already block of jsx like sintax...what I mean is that if I have { do something } I cant place another { do something else } in the { do something block }

#

Maybe it has something to do with slot from the ul from the collapse component, like not allowing me to insert more then 1 html element...but I checked the docs and it should be good...I already try to wrap with Fragment or <></> and same resutl

turbid veldt Oct 15, 2024, 1:16 AM

#

Alright so forwhatever reason

#

it just didnt like your UL not being within the component

#

Converting the colapse to be a div

#

and moving the UL elements inside the nav bar worked

#

    <Collapse>
    <ul>
      {
        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.services ? (
              <Collapse dropdown id="dropdown" text={link.text}>
                <ul>
                {link.services.map((service) => (
                  <li>
                    <Link href={service.href}>{service.text}</Link>
                  </li>
                </ul>
                ))}
              </Collapse>
            ) : (
              <Link href={link.href}>{link.text}</Link>
            )}
          </li>
        ))
      }
    </ul>
    </Collapse>

#

halcyon fable Oct 15, 2024, 1:18 AM

#

I dont exaclty understand what you did

turbid veldt Oct 15, 2024, 1:18 AM

#

I fixed it, it pasted the wrong code

#

<div class=`hs-collapse hidden ${!dropdown && "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={id}>
  <slot />
</div>

halcyon fable Oct 15, 2024, 1:18 AM

#

Ok...but why? The reason I made the collapse compnent was exaclty to keep the ul within the collapse component....

turbid veldt Oct 15, 2024, 1:19 AM

#

Couldn't tell ya

halcyon fable Oct 15, 2024, 1:19 AM

#

then answer me this

#

go to collapse component

#

remove this line: {dropdown && text}

#

and try to put the text prop before the first svg:)

#

then tell me why it doesnt work...

turbid veldt Oct 15, 2024, 1:20 AM

#

I probably wouldn't know

#

I'm not an expert on why any of this is or is not working, I just solved a problem

halcyon fable Oct 15, 2024, 1:21 AM

#

because I'm 100% that is the same problem with the Navbar...somehow,,for some reason, you cant use jsx in jsx sintax...

trail slateBOT Oct 15, 2024, 6:01 PM

#

If your issue is resolved, please help by doing the following two steps:

From the ellipses (3-dot menu) in the top-right corner of the post (not the first message), edit the tags to include the Solved tag.
From the same ellipses, select Close Post.
Your post will still be available to search and can be re-opened simply by replying in it. Closing a post moves it down with older posts, so we can more easily focus on issues that still need to be resovled.
Thank you for your help!

halcyon fable Oct 16, 2024, 9:28 AM

#

@river badger check here

river badger Oct 16, 2024, 9:28 AM

#

ok!

#

is the code at the top the latest code you're working with?

halcyon fable Oct 16, 2024, 9:30 AM

#

the code at the top was from two days ago. The last code i have is what you answered me on the other support thread.

#

But please, just read the code at the top which ive posted

#

I dont have the stackblitz anymore

river badger Oct 16, 2024, 9:32 AM

#

you're just getting an error in Navbar.astro about an unexpected }?

halcyon fable Oct 16, 2024, 9:33 AM

#

yes...and i think is because of that maps function in navbar...long story short, for some reason, the code is not working...

#

i wanted to keep the ul tag inside the collapse component

river badger Oct 16, 2024, 9:34 AM

#

Can you post the latest code here? The other ticket is gone

#

Other than the missing --- at the top I'm not getting any errors

halcyon fable Oct 16, 2024, 9:36 AM

#

what mission?

#

on Button.astro? i have that is ok, just didnt wrote it here

river badger Oct 16, 2024, 9:36 AM

#

spelling. sorry I meant missing

#

No Navbar.astro

halcyon fable Oct 16, 2024, 9:38 AM

#

I edited the post with the backticks for better reading. But the code has the frontmatter. Check now

river badger Oct 16, 2024, 9:48 AM

#

I don't get any errors. I added a fragment(<>) to your ternary because my formatter doesn't work if I don't do that. But no errors:

(
              <>
                <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>
              </>
            )

halcyon fable Oct 16, 2024, 9:49 AM

#

you miss understood

#

can you come in chat room and i explain you faster?

river badger Oct 16, 2024, 9:50 AM

#

I thought you were getting an error about an unexpected }

halcyon fable Oct 16, 2024, 9:50 AM

#

yes but you modified the code...if you look at the top code from this post

#

the ul tag is inside the collapse.astro component

river badger Oct 16, 2024, 9:50 AM

#

I only added <>

#

Thats not what I see

#

this code or the code in the other post?

halcyon fable Oct 16, 2024, 9:52 AM

#

this code

#

ignore code in the other post

#

just the code from this post

river badger Oct 16, 2024, 9:53 AM

#

i get no error:

halcyon fable Oct 16, 2024, 10:01 AM

#

any ideea how to fix this?

#

does it run you in the browser?

river badger Oct 16, 2024, 10:03 AM

#

I don't see a problem so....
I can't run it because I don't have the other components like Link, Button , Collapse etc to run it

halcyon fable Oct 16, 2024, 10:05 AM

#

you have them here... in the post

river badger Oct 16, 2024, 10:08 AM

#

I would need to start a new astro project and install tailwind. Just make a stackblitz and then everyone can see it 🙂

halcyon fable Oct 16, 2024, 10:08 AM

#

ok wait 2 min

#

https://stackblitz.com/~/github.com/catalinurcan9/tai-construct here

halcyon fable Oct 16, 2024, 10:33 AM

#

are you still here?

#

@river badger

river badger Oct 16, 2024, 10:33 AM

#

this seems to work: https://stackblitz.com/~/github.com/catalinurcan9/tai-construct

halcyon fable Oct 16, 2024, 10:34 AM

#

is not working man, i have that unexpected } error...how is it working for you?

#

did you modify something?

#

because if you modify in stackblitz, it doesnt mean i can see it, cuz you dont have access to my repo

river badger Oct 16, 2024, 10:54 AM

#

halcyon fable because if you modify in stackblitz, it doesnt mean i can see it, cuz you dont h...

change this:

            <li>
                    <Link href={service.href}>{service.text}</Link>
                  </li>

To this:

#

           <p>
                    <Link href={service.href}>{service.text}</Link>
                  </p>

halcyon fable Oct 16, 2024, 10:55 AM

#

ok, it works...but why?:))

#

it doesnt make sense

#

i need li tag not p tag:))

river badger Oct 16, 2024, 10:59 AM

#

because your } tags are mmismatched

plucky flicker Oct 16, 2024, 10:59 AM

#

You can’t have an <li> inside of an <li> which is what you had before. Change the top one to a <ul>

river badger Oct 16, 2024, 10:59 AM

#

and your collapses are inside each other

halcyon fable Oct 16, 2024, 10:59 AM

#

plucky flicker You can’t have an <li> inside of an <li> which is what you had before. Change th...

but is not li inside of li...is li inside of ul...if you look at the collapse component, i have the ul

#

so bassicaly the code is like this: the collapse comp has an ul tag

#

on the first map, i create li items

#

if the current itteration of the map is href "/services?

#

on this li tag i create another collapse element

#

which again has an ul tag

#

and in that ul tag, it should place those li

#

after those to li from services, the top map should continue with the other li elements

#

in the top collapse

#

the code should render like this:

plucky flicker Oct 16, 2024, 11:06 AM

#

What does your collapse component look like?

halcyon fable Oct 16, 2024, 11:07 AM

#

<button>bla bla</button>
<ul>
  <li><a href="/despre-noi">Despre noi</a></li>
  <li>
    <button>bla bla</button>
    <ul>
      <li><a href="/gratare-din-caramida">Gratare din caramida</a></li>
      <li><a href="/sobe-de-teracota">Sobe de teracota</a></li>
    </ul>
  </li>
  <li><a href="/portofoliu">Portofoliu</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

halcyon fable Oct 16, 2024, 11:08 AM

#

plucky flicker What does your collapse component look like?

---
const { dropdown = false, id = "navbar", text } = Astro.props;
---

<button
  class=`hs-collapse-toggle inline-flex items-center justify-center ${dropdown ? "group gap-x-1 text-sm text-text transition duration-200 hover:font-semibold hover:text-primary xl:gap-x-2 xl:text-lg xl:leading-5": "xl:hidden"}`
  type="button"
  data-hs-collapse=`#${id}`
>
  {dropdown && text}
  {
    dropdown ? (
      <svg
        class="size-4 fill-none stroke-text stroke-2 transition duration-200 group-hover:stroke-primary group-hover:stroke-[3px] xl:size-6"
        viewBox="0 0 24 24"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="m6 9 6 6 6-6" />
      </svg>
    ) : (
      <svg
        class="size-6 fill-none stroke-accent stroke-[4px] hs-collapse-open:hidden md:size-10"
        viewBox="0 0 40 40"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M5 10H35M5 20H35M5 30H35" />
      </svg>
      <svg
        class="hidden size-6 fill-none stroke-accent stroke-[4px] hs-collapse-open:block md:size-10"
        viewBox="0 0 40 40"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M10 30L15 25L20 20M30 10L25 15L20 20M30 30L25 25L20 20M10 10L15 15L20 20" />
      </svg>
    )
  }
</button>
<ul class=`hs-collapse hidden ${!dropdown && "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={id}>
  <slot />
</ul>

#

@plucky flicker there is the stackblitz link here if it helps you https://stackblitz.com/~/github.com/catalinurcan9/tai-construct

plucky flicker Oct 16, 2024, 11:13 AM

#

Your data-hs-collapse. Try to Wrap that in curly brackets.

halcyon fable Oct 16, 2024, 11:14 AM

#

still the same

plucky flicker Oct 16, 2024, 11:14 AM

#

What line is the error on?

halcyon fable Oct 16, 2024, 11:15 AM

#

components/Navbar.astro:39:194

#

which is this:

#

<Collapse>
      {
        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}>
                {link.services.map((service) => (
                  <li>
                    <Link href={service.href} text={service.text} />
                  </li>
                ))}
              </Collapse>
            ) : (
              <Link href={link.href} text={link.text} />
            )}
          </li>
        )) //<- this line
      }
      <li class="max-xl:pt-6 max-xl:text-center xl:ml-auto">
        <Button icon text="Apeleaza-ne" />
      </li>
    </Collapse>

#

the paranthesis with the comment

plucky flicker Oct 16, 2024, 11:18 AM

#

Try this

#

<Collapse>
{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}>
{link.services.map((service) => (
<li>
<Link href={service.href} text={service.text} />
</li>
))}
</Collapse>
) : (
<Link href={link.href} text={link.text} />
)}
</li>
))} {/* Corrected the position of this closing parenthesis */}

halcyon fable Oct 16, 2024, 11:21 AM

#

same

plucky flicker Oct 16, 2024, 11:22 AM

#

What’s the exact error?

river badger Oct 16, 2024, 11:24 AM

#

He's getting Unexpected "}"

halcyon fable Oct 16, 2024, 11:24 AM

#

same error: Unexpected "}"

#

components/Navbar.astro:39:194

plucky flicker Oct 16, 2024, 11:26 AM

#

Okay. One second. Let me grab my laptop. I’m on my phone currently.

river badger Oct 16, 2024, 11:28 AM

#

The DOM is going something like <ul> -> <li> -> <ul> -> <p> -> <a>

Turning that <p> to an <li> causes the error. Could just style it like an <li> but not sure why li wont work there

halcyon fable Oct 16, 2024, 11:28 AM

#

Ok I really appreciate this guys...all this week I've stayed in this error

#

this is what I need:

#

<button>bla bla</button>
<ul>
  <li><a href="/despre-noi">Despre noi</a></li>
  <li>
    <button>bla bla</button>
    <ul>
      <li><a href="/gratare-din-caramida">Gratare din caramida</a></li>
      <li><a href="/sobe-de-teracota">Sobe de teracota</a></li>
    </ul>
  </li>
  <li><a href="/portofoliu">Portofoliu</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

halcyon fable Oct 16, 2024, 11:29 AM

#

river badger change this: ```html <li> <Link href={service.h...

doing this

halcyon fable Oct 16, 2024, 11:29 AM

#

river badger ```html <p> <Link href={service.href}>{service.te...

to this works

#

but that means the final result will be:

#

<button>bla bla</button>
<ul>
  <li><a href="/despre-noi">Despre noi</a></li>
  <li>
    <button>bla bla</button>
    <ul>
      <p><a href="/gratare-din-caramida">Gratare din caramida</a></p>
      <p><a href="/sobe-de-teracota">Sobe de teracota</a></>
    </ul>
  </li>
  <li><a href="/portofoliu">Portofoliu</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

#

and its pointless, and also doesnt explain why with <p> works but with <li> doesnt

river badger Oct 16, 2024, 11:33 AM

#

this works:

        <Collapse dropdown id="dropdown" text={link.text}>
<ul>
                {link.services.map((service) => (
                  <li>
<Link href={service.href} text={service.text} />
                  </li>
                ))}
            </ul>
              </Collapse>

halcyon fable Oct 16, 2024, 11:33 AM

#

Yeah i know that also...but again, is pointless

river badger Oct 16, 2024, 11:34 AM

#

why?

halcyon fable Oct 16, 2024, 11:34 AM

#

the hole reason I've create the collapse component, was to keep that structure of button an ul separate

#

cuz thats a collapse

#

a button with another element

#

what are you saying right now, was the solution I've made on the other thread where you helped me with the link text

#

but I'm not happy with that:)

#

funny thing

#

if i reproduce the exact map logic

#

on vanilla js

#

it works as expected

#

so, for some reason, its somethiing with the astro syntax...this jsx like sintax

river badger Oct 16, 2024, 11:37 AM

#

would have been nice to know what you've tried

halcyon fable Oct 16, 2024, 11:37 AM

#

tried like this with ul outside of collapse component

#

tried wrapping with Fragment or <> </>

plucky flicker Oct 16, 2024, 11:49 AM

#

---
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 { 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>
        {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>
                  {link.services.map((service) => (
                    <li>
                      <Link href={service.href} text={service.text} />
                    </li>
                  ))}
                </ul>
              </Collapse>
            ) : (
              <Link href={link.href} text={link.text} />
            )}
          </li>
        ))}
        <li class="max-xl:pt-6 max-xl:text-center xl:ml-auto">
          <Button icon text="Apeleaza-ne" />
        </li>
    </Collapse>
  </nav>
</header>

Would this work?

halcyon fable Oct 16, 2024, 11:53 AM

#

would work...but its the same like Grahf tried...and that means I will have to refactor the collapse component, and remove the ul from it

#

I really appreciate both of you guys for helping me...but either solution, is not the one i need, and its frustrating because I dont understand why same logic in vanilla js works, but like this it doesnt...its a simple map function...

#

dont get me wrong...I really appreciate that you help me...but doesnt this frustrate you because why is not working? Im starting to think more and more then maybe this is a serious bug from astro...

#

because we have multiple unanswered questions: why if i change from <li> to <p> like Grahf said above works? why same logic without changing to <p> tags works in vanilla js?

plucky flicker Oct 16, 2024, 12:05 PM

#

---
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 { 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>
        {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>
                  {link.services.map((service) => (
                    <li>
                      <Link href={service.href} text={service.text} />
                    </li>
                  ))}
                </ul>
              </Collapse>
            ) : (
              <Link href={link.href} text={link.text} />
            )}
          </li>
        ))}
        <li class="max-xl:pt-6 max-xl:text-center xl:ml-auto">
          <Button icon text="Apeleaza-ne" />
        </li>
    </Collapse>
  </nav>
</header>

?

halcyon fable Oct 16, 2024, 12:06 PM

#

is the exact code you put before

plucky flicker Oct 16, 2024, 12:08 PM

#

This was

<li>
<Link href={link.href} text={link.text} />
</li>

But now its just

<Link href={link.href} text={link.text} />

halcyon fable Oct 16, 2024, 12:10 PM

#

plucky flicker This was ```ts <li> <Link href={link.href} text={link.text} /> </li> ``` But ...

i dont see where it was like this...i dont have it like this

#

yeah...what about that? it is possible to put that

river badger Oct 16, 2024, 12:11 PM

#

I think @plucky flicker might have pasted thr wrong code?
But what he suggested works

#

<Collapse>
      {
        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}>
                {link.services.map((service) => (
<Link href={service.href} text={service.text} />
                ))}
              </Collapse>
            ) : (
              <Link href={link.href}>{link.text}</Link>
            )}
          </li>
        ))
      }
    </Collapse>

#

or at least no error

#

then in Link.astro you can wrap <a>s in <li>s

plucky flicker Oct 16, 2024, 12:14 PM

#

https://stackblitz.com/~/github.com/catalinurcan9/tai-construct

halcyon fable Oct 16, 2024, 12:14 PM

#

@plucky flicker if you modified on stackblitz, i wont see the modifications, because you dont have access to my repo

plucky flicker Oct 16, 2024, 12:14 PM

#

Honestly, I have also used https://github.com/surjithctly/astro-navbar before and its great

GitHub

GitHub - surjithctly/astro-navbar: Astro-Navbar is a fully responsi...

Astro-Navbar is a fully responsive headless navigation bar for Astro. It supports mobile responsive toggle and dropdowns. - surjithctly/astro-navbar

#

One sec

#

Stackblitz is being stupid now.

halcyon fable Oct 16, 2024, 12:17 PM

#

Ok, i've fixed it

turbid veldt Oct 16, 2024, 12:17 PM

#

Lagging?

#

@plucky flicker ?

plucky flicker Oct 16, 2024, 12:17 PM

#

Yeah

halcyon fable Oct 16, 2024, 12:17 PM

#

witout modifiny any Link.astro or Collapse.astro

plucky flicker Oct 16, 2024, 12:17 PM

#

What did you do to fix it ?

turbid veldt Oct 16, 2024, 12:17 PM

#

Mine was too every time I tried to change this project

halcyon fable Oct 16, 2024, 12:17 PM

#

Now explain me this

#

why this gives us the error:

#

<Collapse>
{
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}>
{link.services.map((service) => (
<li>
<Link href={service.href} text={service.text} />
</li>
))}
</Collapse>
) : (
<Link href={link.href} text={link.text} />
)}
</li>
)) //<- this line
}
<li class="max-xl:pt-6 max-xl:text-center xl:ml-auto">
<Button icon text="Apeleaza-ne" />
</li>
</Collapse>

#

but this its working:

#

<Collapse>
{
links.map((link) =>
link.href === "/servicii" ? (
<Collapse dropdown id="dropdown" text={link.text}>
{link.services.map((service) => (
<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={service.href} text={service.text} />
</li>
))}
</Collapse>
) : (
<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={link.href} text={link.text} />
** </li>**
)
)
}
<li class="max-xl:pt-6 max-xl:text-center xl:ml-auto">
<Button icon text="Apeleaza-ne" />
</li>
</Collapse>

river badger Oct 16, 2024, 12:19 PM

#

adding those classes to the <li> makes it work?

halcyon fable Oct 16, 2024, 12:19 PM

#

is nto about the css

#

ignore css

river badger Oct 16, 2024, 12:19 PM

#

what else changes?

plucky flicker Oct 16, 2024, 12:19 PM

#

Oh wait I see it

#

Well I thought I did

river badger Oct 16, 2024, 12:20 PM

#

this lines place chnaged: link.href === "/servicii" ? (

plucky flicker Oct 16, 2024, 12:20 PM

#

Your first code block is working just fine for me

halcyon fable Oct 16, 2024, 12:20 PM

#

guys

#

stop

#

lets read again

#

first code block is the one with the error

#

without any modification from me or your ideas

#

basically is the reason for this thread

#

second block of code, is with a modification that hit me right now

#

difference between them is that instead of on <li> tag that wrapped the second map function with its collapse on so one

#

now i've put a li tag around every Link component

#

i will try to edit for you to see it

plucky flicker Oct 16, 2024, 12:23 PM

#

I understand it. one sec

halcyon fable Oct 16, 2024, 12:24 PM

#

check the bold text on both blocks

plucky flicker Oct 16, 2024, 12:24 PM

#

So

<-- BROKEN -->
<Collapse>
      {
        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}>
                {link.services.map((service) => (
                  <li>
                    <Link href={service.href} text={service.text} />
                  </li>
                ))}
              </Collapse>
            ) : (
              <Link href={link.href} text={link.text} />
            )}
          </li>
        )) //<- this line
      }
      <li class="max-xl:pt-6 max-xl:text-center xl:ml-auto">
        <Button icon text="Apeleaza-ne" />
      </li>
    </Collapse>

This does not work are nesting <li> elements inside another <li>, which is invalid HTML. A list item (<li>) cannot directly contain another list item. They must always be siblings, and both need to be children of a <ul> or <ol>.

#

{
  links.map((link) =>
    link.href === "/servicii" ? (
      <Collapse dropdown id="dropdown" text={link.text}>
        {link.services.map((service) => (
          <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={service.href} text={service.text} />
          </li>
        ))}
      </Collapse>
    ) : (
      <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={link.href} text={link.text} />
      </li>
    )
  )
}

This works because you're conditionally rendering the collapsible dropdown without nesting <li> inside another <li>.
The dropdown (<Collapse> component) itself is outside the <li> and valid because you're treating it as a block-level component with multiple child elements (list items)

halcyon fable Oct 16, 2024, 12:26 PM

#

plucky flicker So ```ts <-- BROKEN --> <Collapse> { links.map((link) => ( ...

wrong...on here is not nesting li inside li...is li inside ul...

#

<Collapse component has an ul with slot

#

long story short, if you ingore css classes and all the other crap

#

Collapse component has this html:

#

<button></button>
<ul></ul>

halcyon fable Oct 16, 2024, 12:28 PM

#

plucky flicker So ```ts <-- BROKEN --> <Collapse> { links.map((link) => ( ...

so this, should convert to this:

#

<ul> <- ul with slot from Collapse
  <li><a></a><li>
  <li>
    <ul> <- again the same ul with slot from Collapse (this is the part with the second map function)
      <li><a></a></li>
      <li><a></a></li>
    </ul>
  </li>
  <li><a></a><li>
  <li><a></a><li>
</ul>

#

but for some reason

#

in my Navbar.astro

#

if i have this code:

#

      {
        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">  <- this li tag here
            {link.href === "/servicii" ? (
              <Collapse dropdown id="dropdown" text={link.text}>
                {link.services.map((service) => (
                  <li>
                    <Link href={service.href} text={service.text} />
                  </li>
                ))}
              </Collapse>
            ) : (
              <Link href={link.href} text={link.text} />
            )}
          </li>
        ))
      }
      <li class="max-xl:pt-6 max-xl:text-center xl:ml-auto">
        <Button icon text="Apeleaza-ne" />
      </li>
    </Collapse>```

#

doesnt work

#

but if I make like this:

plucky flicker Oct 16, 2024, 12:33 PM

#

This does not work. Becuase your first <li> is not being closed properly before rednering.

Collapse has an ul element inside it. You can't have ul directly inside li without closing the parent li, which breaks the structure.

{
  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}>
          {link.services.map((service) => (
            <li>
              <Link href={service.href} text={service.text} />
            </li>
          ))}
        </Collapse>
      ) : (
        <Link href={link.href} text={link.text} />
      )}
    </li>
  ))
}

halcyon fable Oct 16, 2024, 12:33 PM

#

<Collapse>
      {
        links.map((link) =>
          link.href === "/servicii" ? (
            <Collapse dropdown id="dropdown" text={link.text}>
              {link.services.map((service) => (
                <li class="max-xl:mb-4 max-xl:border-b max-xl:border-text/30 max-xl:py-0.5 max-xl:text-center"> <- li around a 
                  <Link href={service.href} text={service.text} />
                </li>
              ))}
            </Collapse>
          ) : (
            <li class="max-xl:mb-4 max-xl:border-b max-xl:border-text/30 max-xl:py-0.5 max-xl:text-center"> <- li around a
              <Link href={link.href} text={link.text} />
           </li>
          )
        )
      }
      <li class="max-xl:pt-6 max-xl:text-center xl:ml-auto">
        <Button icon text="Apeleaza-ne" />
      </li>
    </Collapse>```

plucky flicker Oct 16, 2024, 12:33 PM

#

Do you see what I mean?

halcyon fable Oct 16, 2024, 12:34 PM

#

plucky flicker This does not work. Becuase your first `<li>` is not being closed properly befor...

now this makes sense...

#

and guess what

#

this happens because of jsx rendering

#

because jsx is async

#

if i make same thing in vanilla js, it will work properly

#

what a mess:))

#

anyway, i finnaly found my solution

#

after all week

#

and all because of you guys:D

plucky flicker Oct 16, 2024, 12:35 PM

#

Good deal!

halcyon fable Oct 16, 2024, 12:37 PM

#

Anyway, thank you sooo much @plucky flicker and @river badger . If you ever come to Romania, beer is on me;)

river badger Oct 16, 2024, 12:39 PM

#

haha

#Unexpected "}"