まず、JavaScriptがどのようにリストを変換するかを見てみましょう.
次に、map()関数を使用してnumbers配列の値を2倍にした後、map()が返した新しい配列をdoubled変数に割り当て、ログをチェックするコードを示します.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

このコードはコンソールに[2, 4, 6, 8, 10]を出力します.
Reactでは、配列を注釈リストとして作成する方法は基本的に同じです.

複数の構成部品をレンダリング

エンティティセットを作成し、カッコ{}を使用してJSXに含めるを指定できます.
次のJavaScript map()関数を使用して、numbers配列を繰り返し実行します.各項目について、<li> Elliteを返し、その結果をlistItemsに保存します.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>  <li>{number}</li>);

listItemsアレイは<ul>エリ、DOMにレンダリングします。に含まれています.

ReactDOM.render(
  <ul>{listItems}</ul>,  document.getElementById('root')
);

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」は、別名リストを作成するときに含める必要がある特殊な文字列ツリーです.次のセクションでは、keyの重要性についてさらに議論します.次に、numbers.map()にリスト内の各エントリにkeyを割り当てて、鍵の紛失の問題を解決します.

Key

Keyは、Reactが変更、追加、または削除するアイテムを決定するのに役立ちます.keyは、安定した一意性を確保するために、アレイ内の領域に指定する必要があります.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>    {number}
  </li>
);

キーを選択する最善の方法は、リスト内の他のアイテム間でアイテムを一意に識別できる文字列を使用することです.ほとんどの場合、データのIDは鍵として使用される.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>    {todo.text}
  </li>
);

レンダリングされたアイテムに信頼できるIDがない場合は、最後の方法は、アイテムのインデックスをキーとして使用します.

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs  <li key={index}>    {todo.text}
  </li>
);

アイテムの順序が変更される可能性がある場合は、キーにインデックスを使用することは推奨されません.これにより、パフォーマンスが低下したり、構成部品の状態に関連する問題が発生する可能性があります.Robin Pokorny'sが書いた鍵としてインデックスを使用した場合の負の影響の詳細を参照してください.リスト項目にキーが明示的に指定されていない場合、reactはデフォルトでキーとしてインデックスを使用します.

Index as a key is an anti-pattern

So many times I have seen developers use the index of an item as its key when they render a list.

todos.map((todo, index) => (
    <Todo {...todo} key={index} />
  ));
}

It looks elegant and it does get rid of the warning (which was the ‘real’ issue, right?). What is the danger here?
It may break your application and display wrong data!
Let me explain, a key is the only thing React uses to identify DOM elements. What happens if you push an item to the list or remove something in the middle? If the key is same as before React assumes that the DOM element represents the same component as before. But that is no longer true.
例:正しい鍵の使用

function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.  return <li>{props.value}</li>;}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.    <ListItem key={number.toString()} value={number} />  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

経験的には、map()関数の内部の領域に鍵を入れることを推奨します.

Reactではkeyがヒントを与えるが,素子として伝達されない.構成部品がkeyと同じ値を必要とする場合は、別の名前のpropに明確に渡されます。 const content = posts.map((post) => <Post key={post.id} id={post.id} title={post.title} /> ); 上記の例では、Postコンポーネントはpropsである。idは読み込めますがpropsです。keyは読めません。