React Each child in a list should have a unique "key" prop. 리액트 키값 오류

December 07, 2021

React Each child in a list should have a unique “key” prop. 리액트 키값 오류

{
  props.items.map(data => (
    <example title={data.title} amount={data.amount} date={data.date} />
  ))
}

map 함수를 통해 컴포넌트를 렌더링 하니 에러가 발생된다

결과물은 이상없이 나타나는데 왜 에러가 나타나는가?

이유는 key값을 설정하지 않았기 때문이다.

해결방법

출력하려는 데이터에 에 key 또는 id 항목을 만들고, 함수를 통해 key값을 추가해주면 이상이 없어진다.

const Data = [
  {
    id: "e1",
    title: "data1",
    amount: 94.12,
    date: new Date(2021, 7, 14),
  },
  {
    id: "e2",
    title: "data2",
    amount: 799.49,
    date: new Date(2021, 2, 12),
  },
  {
    id: "e3",
    title: "data3",
    amount: 294.67,
    date: new Date(2021, 2, 28),
  },
  {
    id: "e4",
    title: "data4",
    amount: 450,
    date: new Date(2021, 5, 12),
  },
]

{
  props.items.map(data => (
    <example
      title={data.title}
      amount={data.amount}
      date={data.date}
      key={data.id}
    />
  ))
}