Keys Warning

If you're here, one of the following is probably true:

You've rendered an element (or list) for which there are multiple child elements that share the same key:

<div>
  <p key="1">Foo</p>
  <p key="1">Bar</p>
</div>
// or:
const items = [
  { name: "Foo", id: "d1ac4a44-4da2-4584-9265-10fb714025d6" },
  { name: "Bar", id: "d1ac4a44-4da2-4584-9265-10fb714025d6" }
  // note the duplicate id!
]
<div>
  {items.map((item) => (
    <h1 key={item.id}>{item.name}</h1>
  ))}
</div>

or:

You've rendered a list/array for which there is at least one key and one missing key:

// the following is valid:
<div>
  <p>Foo</p>
  <p key="1">Bar</p>
</div>
// but this is not:
const items = [
  { name: "Foo", id: "d1ac4a44-4da2-4584-9265-10fb714025d6" },
  { name: "Bar" }
  // note the missing id!
]
<div>
  {items.map((item) => (
    <h1 key={item.id}>{item.name}</h1>
  ))}
</div>

In general, items in a list/array should always have a stable key prop (i.e. a unique identifier, not the item's index). This is how Kiru persists state across re-renders when the order of the items change.