[React] Warning: Each child in a list should have a unique "key" prop.

 

Warning: Each child in a list should have a unique "key" prop. 라는 오류가 발생했다. 

 

각각의 prop들은 key를 가져야 한다는 오류이다.

const Tab = [
  {
    title: 'HOME',
    content: 'HOME'
  },
  {
    title: 'WEB',
    content: 'WEB'
  },
  {
    title: 'ABOUT',
    content: 'ABOUT'
  },
  {
    title: 'BLOG',
    content: 'BLOG'
  }
]

원래 코드는 위와 같았다.

 

const Tab = [
  {
    id:1,
    title: 'HOME',
    content: 'HOME'
  },
  {
    id:2,
    title: 'WEB',
    content: 'WEB'
  },
  {
    id:3,
    title: 'ABOUT',
    content: 'ABOUT'
  },
  {
    id:4,
    title: 'BLOG',
    content: 'BLOG'
  }
]

id를 추가해주었다.

 

그래도 오류가 사라지지 않는다.

 

export default function App() {
  const { contentItem, contentChange } = useTabs(0, Tab);
  return (
    <div className="App">
      <div className="App-header">
        <h1>Hi, Im SeonAe</h1>
        <div>
          {Tab.map((section, index) => (
            <button onClick={() => contentChange(index)}>
              {section.title}
            </button>
          ))}
        </div>
        <div>
          {contentItem.content}
        </div>
      </div>
    </div>
  );
}

map 함수 button 속성에  key={section.id}를 추가해주어야 한다.

 

export default function App() {
  const { contentItem, contentChange } = useTabs(0, Tab);
  return (
    <div className="App">
      <div className="App-header">
        <h1>Hi, Im SeonAe</h1>
        <div>
          {Tab.map((section, index) => (
            <button onClick={() => contentChange(index)} key={section.id}>
              {section.title}
            </button>
          ))}
        </div>
        <div>
          {contentItem.content}
        </div>
      </div>
    </div>
  );
}

 

key={section.id}을 onClick 앞에 해주면 안되고 뒤에 해줘야 함!

 

오류 사라짐