【React】keyとは何か？なぜ必要なのか？(エラー/警告対処法と原因を実例で解説:Warning: Each child in a list should have a unique “key” prop)

<タグ key='固有の値'></タグ>

const items = [
  { id: 1, text: 'りんご' },
  { id: 2, text: 'バナナ' },
  { id: 3, text: 'みかん' }
];

function ItemList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}> 
          {item.text}
        </li>
      ))}
    </ul>
  );
}

<li key={item.id}> 

//警告が出る
{items.map(item => (
  <li>
    <span key={item.id}>{item.text}</span> // この key は意味がない（兄弟要素の識別に使われない）
  </li>
))}

{items.map(item => (
  <li key={item.id}> //各要素の最上位（ルート）に一度だけ記述する
    <span>{item.text}</span>
  </li>
))}

{items.map((item, index) => (
  <li key={index}>{item.text}</li> //インデックスをkeyに使っている
))}

// 親コンポーネント
function ParentList() {
  const data = [
    { id: 'a', text: 'アップル' },
    { id: 'b', text: 'バナナ' }
  ];

  return (
    <ul>
      {data.map((item) => (
        <ItemComponent 
          key={item.id}  // keyを設定。渡せない
          itemData={item} // このデータはPropsで渡せる
        />
      ))}
    </ul>
  );
}

// 子コンポーネント
function ItemComponent(props) {
  const keyAccess = props.key; //※undefinedになる！
  const dataId = props.itemData.id;

  return (
    <li>
      <p>key の値: {keyAccess ? keyAccess : 'アクセスできません (undefined)'}</p>
      <p>データID: {dataId}</p>
      <p>テキスト: {props.itemData.text}</p>
    </li>
  );
}

  return (
    <ul>
      {data.map((item) => (
        <ItemComponent 
          key={item.id}  //※keyを設定。渡せない
          uniqueId={item.id} //〇Props用に定義
          itemData={item} // このデータはPropsで渡せる
        />
      ))}
    </ul>
  );
}

//意図した結果にならない
function ItemList({ data }) {
  return (
    <ul>
      {
        data.forEach((item) => {
          return <li key={item.id}>{item.name}</li>; // 何も返さないため、この場所には何もレンダリングされない
        })
      }
    </ul>
  )
}

//リストを生成するためにforループを使う場合
function ItemList({ data }) {
  const listItems = [];
  for (let i = 0; i < data.length; i++) {
    listItems.push(<li key={data[i].id}>{data[i].name}</li>);  // 要素を生成し、keyを指定して配列に追加
  }

  return (
    <ul>
      {listItems} //別途returnでReactの要素を生成する。
    </ul>
  );
}

const tasks = [
  { id: 101, name: '牛乳を買う', isCompleted: false },
  { id: 102, name: '報告書を提出', isCompleted: true },
  { id: 103, name: 'Reactの学習', isCompleted: true },
  { id: 104, name: 'メール返信', isCompleted: false }
];

function TaskCategorizer({ tasks }) {
  // 1. filterによる完了データの絞り込み
  const completedTasks = tasks.filter((task) => task.isCompleted);

  // 2. filterによる未完了データの絞り込み
  const incompleteTasks = tasks.filter((task) => !task.isCompleted);

  return (
    <div>
      {/* 絞り込んだデータ配列の個数を表示するなどに利用 */}
      <p>完了したタスク数: {completedTasks.length} 件</p>
      <p>未完了のタスク数: {incompleteTasks.length} 件</p>

      {/* 絞り込んだデータを使って、別のコンポーネントに渡す */}
      <TaskListComponent title="完了済み" taskData={completedTasks} />
      <TaskListComponent title="未完了" taskData={incompleteTasks} />
    </div>
  );
}

/TaskListComponentでkeyが必要
function TaskListComponent({ title, taskData }) {
  return (
    <section>
      <h3>{title}</h3>
      <ul>
        {/* ★ ここで初めて map が使われ、JSX要素の配列が生成されるため、key が必要になる */}
        {taskData.map((task) => (
          <li key={task.id}>{task.name}</li>
        ))}
      </ul>
    </section>
  );
}

const products = [
  { id: 'A01', name: 'PCモニター', price: 30000 },
  { id: 'B02', name: 'ワイヤレスマウス', price: 3500 },
  { id: 'C03', name: 'メカニカルキーボード', price: 12000 }
];

function ProductList({ products }) {
  // アキュムレータ（acc）の初期値として空の配列（[]）を指定
  const listItems = products.reduce((acc, product) => {
    // 累計値 (acc) に React 要素を追加していく
    acc.push(
      // key は、push する React 要素 (<li>) の最上位に設定
      <li key={product.id}>
        {product.name} - {product.price.toLocaleString()}円
      </li>
    );
    // 更新された acc (React要素の配列) を次の処理に渡す
    return acc;
  }, []); // アキュムレータの初期値

  return (
    <div>
      <h2>商品一覧</h2>
      <ul>
        {/* 最終的に生成された React要素の配列を展開 */}
        {listItems}
      </ul>
    </div>
  );
}