#conditionally render table of contents

11 messages · Page 1 of 1 (latest)

stark dock
#

I currently have this code rendering a table of contents based on headings in a markdoc file. How can I change the code to only show the table of contents if the markdoc file has headings, and hide it if it doesnt?
<ul class="space-y-2">
{
headings.map((heading) => (
<li>
<a
class:list={[
"text-gray-800 dark:text-gray-200 hover:text-purple-500 transition-all aria-[current=true]:font-bold",
{ "hidden": heading.depth === 1 },
{ "ml-2": heading.depth === 3 },
{ "ml-4": heading.depth === 4 },
]}
href={#${heading.slug}}
aria-current="false">
{heading.text}
</a>
</li>
))
}
</ul>

knotty jackalBOT
#

Hi @stark dock. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To conditionally render the table of contents only when there are headings in your Markdoc file, you can check if the headings array has any items before rendering the <ul>. In Astro (and JSX-like syntax), you can do this with a simple conditional expression:

{headings.length > 0 && (
  <ul class="space-y-2">
    {
      headings.map((heading) => (
        <li>
          <a
            class:list={[
              "text-gray-800 dark:text-gray-200 hover:text-purple-500 transition-all aria-[current=true]:font-bold",
              { "hidden": heading.depth === 1 },
              { "ml-2": heading.depth === 3 },
              { "ml-4": heading.depth === 4 },
            ]}
            href={`#${heading.slug}`}
            aria-current="false">
            {heading.text}
          </a>
        </li>
      ))
    }
  </ul>
)}

This way, the table of contents will only be rendered if there is at least one heading in the headings array. This approach is consistent with Astro's conditional rendering syntax, which is similar to JSXDynamic expressions in Astro and conditionally render elements.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@stark dock Kapa.ai is still learning and improving, please let me know how I did by reacting below.

stark dock
#

@knotty jackal what if I want it to work on this code block?
<div class="bg-slate-950 rounded-xl p-6">

  <p class="text-2xl font-bold uppercase">Table Of Contents</p>
  <hr class="border-emerald-400">
  <ul class="space-y-2">
        {
          headings.map((heading) => (
            <li>
              <a
                class:list={[
                  "text-gray-800 dark:text-gray-200 hover:text-purple-500 transition-all aria-[current=true]:font-bold",
                  { "hidden": heading.depth === 1 },
                  { "ml-2": heading.depth === 3 },
                  { "ml-4": heading.depth === 4 },
                ]}
                href={`#${heading.slug}`}
                aria-current="false">
                {heading.text}
              </a>
            </li>
          ))
        }
      </ul>
</div>
knotty jackalBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

To conditionally render the entire table of contents block (including the <div>, heading, and list) only when there are headings, you should wrap the whole block in a conditional expression that checks if headings.length > 0. This is consistent with Astro's conditional rendering syntax, which is similar to JSXDynamic expressions in Astro; see also conditionally render elements.

Here’s how you can update your code:

{headings.length > 0 && (
  <div class="bg-slate-950 rounded-xl p-6">
    <p class="text-2xl font-bold uppercase">Table Of Contents</p>
    <hr class="border-emerald-400">
    <ul class="space-y-2">
      {
        headings.map((heading) => (
          <li>
            <a
              class:list={[
                "text-gray-800 dark:text-gray-200 hover:text-purple-500 transition-all aria-[current=true]:font-bold",
                { "hidden": heading.depth === 1 },
                { "ml-2": heading.depth === 3 },
                { "ml-4": heading.depth === 4 },
              ]}
              href={`#${heading.slug}`}
              aria-current="false">
              {heading.text}
            </a>
          </li>
        ))
      }
    </ul>
  </div>
)}

This will ensure the entire table of contents block is only rendered if there are headings present. If headings is empty, nothing will be rendered.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@stark dock Kapa.ai is still learning and improving, please let me know how I did by reacting below.

stark dock
#

@knotty jackal it works but the opening and closing { ( are highlighted red in vs code. why?

knotty jackalBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

I'm sorry, but the knowledge sources provided do not contain specific information about why VS Code might highlight the opening and closing { ( in red when using conditional rendering in Astro components. The documentation does confirm that Astro supports JSX-like conditional rendering syntax using {condition && (...)} and that this is valid Astro syntax Dynamic expressions in Astro, conditionally render elements.

If you are seeing red highlights, it could be related to your editor's syntax highlighting, an extension issue, or a misconfiguration, but the official documentation does not address this directly. If your code compiles and works as expected, the syntax is correct according to Astro's documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: