Shopify Polaris with Typescript/React: Each child in an array should have a unique "key" prop. Check the render method

Shopify Polarisに関して。

TypeScriptを用いたReactで、map()メソッドを使って配列の中のオブジェクトをそれぞれ表示したい。

変数dataに配列の中にオブジェクトを入れ、useStateの初期値にdataをセットした。

そして、map()メソッドを使用してデータを渡せばうまくいくと思ったが、何も表示されない。

書いたコードはこちら。

const data = [
  {
    id: 1,
    path: './images/fylo-landing-page.png',
    desc: 'Fylo Landing Page',
    url:'',
  },
  {
    id: 2,
    path: './images/huddle-curved-sections.png',
    desc: 'Huddle Curved Sections',
    url:'',
  },
]
const Projects = () => {
  const [items, setItems] = useState(data)
  return (
    <>
      {items.map((item) => {
        const {id, path, desc, url } = item
        return (
          <>
            <a href={url} >
              <MediaCard>
                <img key={id} src={path} alt={desc}/>
                <small text-lg">{desc}</small>
                <VideoThumbnail />
              </MediaCard>
            </a>
          </>
        )
      })}
    </>
  )
}

ここで、警告が。

Each child in an array should have a unique "key" prop. Check the render method

この警告は「リスト項目には key を与えるべきだ」という意味です。

Reactの公式ドキュメントで、Keyについて大事そうな文を抜粋しました。

• Key は、どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立つ。
• 配列内の項目に安定した識別性を与えるため、それぞれの項目に key を与えるべき。
• map() 呼び出しの中に現れる要素にはkey が必要

ということだが、key={id}をしっかり与えているはずなのに表示されないし、keyを与えるべきとの警告が出続けている。

解決方法

つまり、keyが足りてないということなので、keyを足してみる。

return (
  <>
    {items.map((item) => {
      const {id, path, desc, url } = item
      return (
        <>
          <a href={url} key={id}>
            <MediaCard>
              <img key={id} src={path} alt={desc}/>
              <small text-lg">{desc}</small>
              <VideoThumbnail key={id}/>
            </MediaCard>
          </a>
        </>
      )
    })}
  </>
)

以上で、無事表示されました。