Reactで「Warning: Each child in a list should have a unique “key” prop.」が出た時の解決法

投稿日:2022/09/11　最終更新日:2022/09/12

Reactで「Warning: Each child in a list should have a unique “key” prop.」が出た時の解決法

プログラミング

Table of Contents

原因

jsxにてmap関数でループさせたときによくみられるエラーです。

例えば以下のようにprops.listsをmap関数でループさせていると想定してみましょう。

import React from 'react

const Test = (props) => {
 return (
  <ul>
   { props.lists.map((list) => {
     <li>{ list }</li>
   ))}
  </ul>
 )
}

export default Test

この場合、コンソール上では「Warning: Each child in a list should have a unique “key” prop.」と出力されているはずです。

Reactではmap関数やforEach関数などでループ処理をさせる際に一意のkeyを与えていない場合にこのエラーが出力されます。

解決法

key={ ○○ }を直下の子要素に与える

この場合は、直下の子要素（例の場合は<li>要素）にkeyを指定してあげます。

※変更点は6~7行目

import React from 'react

const Test = (props) => {
 return (
  <ul>
   { Object.values(props.lists).map((list, index) => {
     <li key={ index.toString() }>{ list }</li>
   ))}
  </ul>
 )
}

export default Test

map関数やforEach関数では第2引数で配列内の要素におけるインデックス番号が取得できるので、それをtoString関数で文字列に変換してあげればOKです。

これでエラーは解決されるはずです。