@sharp231posted at 2023-07-20

map関数に関する処理のエラーを改善したいです

Q&A

Closed

JavaScript React

解決したいこと

ここに解決したい内容を記載してください。

map関数のエラーを改善させたいです
よろしくお願いします

発生している問題・エラー

{ITEMS.map(item => {
        return (
          <a
            href={item.href}
            className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
            target="_blank"
            rel="noopener noreferrer"
          >

            <h2 className={`mb-3 text-2xl font-semibold`}>
              {item.title}
              <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
                -&gt;
              </span>
            </h2>
            
            <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
              {item.description}
            </p>
          </a>
        )
        })}

例）

Missing "key" prop for element in iterator

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

ソースコードを入力

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md

3Answer

@blue32a posted at 2023-07-20

エラーメッセージが示しているように、イテレータ（繰り返しとなる要素）に "key" propが存在しないことが原因だと思います。

リストとなる要素には、Reactが個々の要素を識別するためのkeyが必要です。
keyについては下記のドキュメントで説明されているので、そちらを参照して学習するのが良いと思います。

配列の各アイテムには、key を渡す必要があります。配列内の他のアイテムと区別できるようにするための一意な文字列ないし数値のことです。

3Like

@ORCHESTRA_TAPE posted at 2023-07-21

Reactで要素の配列をレンダリングする際に、各要素に一意の「key」プロパティを提供せずに行うと、エラーメッセージ「Missing 'key' prop for element in iterator」が発生します。

このエラーを修正するためには、配列内の各アイテムに「key」プロパティを追加する必要があります。以下のようにコードを修正して、「key」プロパティを含めることができます。

{ITEMS.map((item, index) => {
  return (
    <a
      key={index}
      href={item.href}
      className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
      target="_blank"
      rel="noopener noreferrer"
    >
      <h2 className={`mb-3 text-2xl font-semibold`}>
        {item.title}
        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
          -&gt;
        </span>
      </h2>

      <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
        {item.description}
      </p>
    </a>
  );
})}

この更新されたコードでは、要素にkey={index}を追加しました。index変数を配列内の各アイテムの一意の識別子として使用しました。それで、エラーは解決され、要素の配列は正しく描写されるべきです。

2Like

@nak435 posted at 2023-07-20

1行目で参照されているITEMSは、{href, title, description}を持つ配列なのでしょうか？

0Like

Are you sure you want to delete the question?