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>
</>
)
})}
</>
)
以上で、無事表示されました。