리액트 key 할당해도 해결 안되는 문제. Warning:Each child in an array or iterator should have a unique"key"prop.

리액트에서 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>