[ReactDoc] 列表與鍵（Lists and Keys）

鍵（key）應該是要設定在疊代陣列的函式中

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>;
}

在同一個疊代迴圈中的 key 值必須不同，但在不同迴圈中可以重複

/**
 * 第一個陣列和第二個陣列的 key 值可以重複
 **/
function Blog(props) {
  // 第一個陣列疊代
  const sidebar = (
    <ul>
      {props.posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );

  // 第二個陣列疊代
  const content = props.posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));

  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}