How to add logic based on an mdx map() loop index?

[rigid ledge]

When adding a loop like this to a template:

posts.map((links) => (
  <li>
    <a href={link.path}>
      {link.label}
    </a>
  </li>
))

How do I add logic based on the map()'s index? I need to add commas to all but the last iteration.

[rocky shard]

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

---

You can add logic based on the map() function's index by using the second argument of the map() function, which represents the current index of the array. Here's how you can do it:

posts.map((link, index) => (
  <li>
    <a href={link.path}>
      {link.label}
    </a>
    {index < posts.length - 1 ? ',' : ''}
  </li>
))

In this code, we're checking if the current index is less than the length of the posts array minus one (which represents the last index). If it is, we add a comma. If it's not (meaning it's the last iteration), we don't add anything.

Please note that this is a general JavaScript solution and should work in most contexts where you're using JavaScript or a JavaScript-based framework. However, the exact syntax might vary depending on the specific context or framework you're using.

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

@rigid ledge kapa.ai is still learning and improving, please let us know how it did by reacting below