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 앞에 해주면 안되고 뒤에 해줘야 함!
오류 사라짐
'웹 > React' 카테고리의 다른 글
[React] Referrer Policy: strict-origin-when-cross-origin 403 error (0) | 2021.10.11 |
---|---|
[React]_구구단 (0) | 2021.02.28 |