React.jsで、配列をforやmapで回して要素を表示する時によく出るエラーです。
Each child in a list should have a unique "key" prop.
例えば以下のように、stringの配列をpropsで受け取って、mapで<li>を作った時、上記のエラーが出ます。
sample.tsx
export default function Sample (props: {items: string[]}) {
const list = props.items.map(item => <li>{item}</li>)
return (
<div>
<ul>
{list}
</ul>
</div>
)
}
Vue.jsを触ったことがある方は、対策もなんとなく想像がつきますね。v-forではkeysを指定する必要があります。
<div v-for="(article, i) in loadedArticles" :key="`${i}-loaded`">
<article-card :article="article" class="l_card" />
</div>
mapで作った<li>に、一意になるようなkeyを渡してあげるとエラーが消えます。
mapの第二引数にはループのindexが入っているので、それをそのまま使うと良いです。
sample.tsx
export default function Sample (props: {items: string[]}) {
const list = props.items.map((item, i) => <li key={i}>{item}</li>)
return (
<div>
<ul>
{list}
</ul>
</div>
)
}