初心者には分かりにくいREACT map()関数とkey

map()関数とkey=

以下はＲＥＡＣＴ公式ドキュメントのリストと keyからの抜粋です。

map()関数とは、配列の中身を順次処理する関数です。

SyntaxHighlighterについて
example-filename.php
1
2
3
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
要素の集合を作成し中括弧 {} で囲むことで JSX に含めることができます。
以下では、JavaScript の map() 関数を利用して、numbers という配列に対して反復処理を行っています。それぞれの整数に対して 
 要素を返しています。最後に、結果として得られる要素の配列を listItems に格納しています：
SyntaxHighlighterについて
example-filename.php
1
2
3
4
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

listItems という配列全体を 
 要素の内側に含め、それを DOM へレンダーします：

SyntaxHighlighterについて
example-filename.php
1
2
3
4
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);
コードペン
このコードは、1 から 5 までの数字の箇条書きのリストを表示します。
基本的なリストコンポーネント
SyntaxHighlighterについて
example-filename.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}
 
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
このコードを実行すると、「リスト項目には key を与えるべきだ」という警告を受け取る。

numbers.map() 内のリスト項目に key を割り当てて、key が見つからないという問題を修正。
SyntaxHighlighterについて
example-filename.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<a href="https://codepen.io/gaearon/pen/jrXYRR?editors=0011"><span class="hutoaka">コードペン</span></a>
 
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}
 
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
コードペン
Key
Key は、どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立ちます。
SyntaxHighlighterについて
example-filename.php
1
2
3
4
5
6
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);
REACT公式サイト