Property 'key' does not exist on type > 'LiHTMLAttributes'.ts in Astro component

Question

I am using Astro and typescript and having this code which returns a navigation:

<nav>
  <ul class="flex gap-x-12">
    {
      menuItems.map((item) => (
        <li key={item.title}>
          <Link to={item.url}>{item.title}</Link>
        </li>
      ))
    }
  </ul>
</nav>

I get this typescript error on the key prop:

Type '{ children: any; key: string; }' is not assignable to type 'LiHTMLAttributes'. Property 'key' does not exist on type 'LiHTMLAttributes'.ts

How do I solve this issue? From the astro docs I should be able to add the key?

Or is key not needed in Astro arrays and should I somehow configure the ESlint differently?

Answer 1

I think Astro manages the keys for each items under the hood, so you don't have to provide a key prop. (the reason you can't is because astro syntax changes any HTML global attributes)

<nav> 
  <ul class="flex gap-x-12">
{
  menuItems.map((item) => (
    <li>
      <Link to={item.url}>{item.title}</Link>
    </li>
  ))
}
  </ul>
</nav>

".map just works!" -> https://astro.build/