For - keyedBy prop

[seppwc]

The current implementation for For's auto-key-ing is naive and frankly stupid as it brings in possible issues with duplicate keys.

a possible solution is to default keying the items in the array by they index, and also including a keyedBy prop that will be a string, referencing a property name in the item which to use as a key

example api

function App(){

  const arr = [
    {
      _id: 'id-string-01',
      name: 'Bob'
    },
    {
      _id: 'id-string-02',
      name: 'Frank'
    },   
    {
      _id: 'id-string-03',
      name: 'James'
    }

  ]

  return (
    <For each={arr} keyedBy={'_id'} >
      {(value)=>(<div>{value.name}</div>)}
    </For>
  )
}

no keyedBy Prop should default to keying the item by its index, not optimal for all cases, but is want is often used.