💎 리액트
리액트 key 할당해도 해결 안되는 문제. Warning:Each child in an array or iterator should have a unique"key"prop.
비타민찌
2022. 2. 28. 16:52
728x90
리액트에서 key를 할당해도 해결 안되는 문제.
Warning: Each child in an array or iterator should have a unique “key” prop.
보통 react에서 위 에러가 뜨면 key를 할당해 해결해 주면 된다. 흔하기도 하고 간단하게 해결할 수 있는 워닝이다.
그런데 key를 할당해도 여전히 같은 에러가 떴다.
key 값을 map의 index를 줬다가, index는 쓰지 말라고 해서 유니크한 값을 줬는데도 해결되지 않았는데..
결국 아래처럼 해서 해결했다.
[해결]
<>
<Box key={index}> 내용 </Box>
</>
[원인]
감싸는 코드<> </>가 key보다 더 상위로 인식되어서 제대로 인식 되지 않아 발생한 문제였다.
<> 대신 <div> 같은걸로 바꿔서 key를 할당해 주면 해결된다.
<Wrapper key={index}>
<Box> 내용 </Box>
</Wrapper>
728x90