[React]error: Warning: Each child in a list should have a unique "key" props

새로운 <option> 요소와 <li>를 생성하는 map함수를 돌려서 사용하는데 계속 에러가 발생했다. 이유를 계속 알 수가 없었다. ㅠ

분명 고유한 id값을 적용해줬는데 왜 그럴까,,,, 생각하면서 다른 거 먼저 진행하다가 이유를 알아냈는데,,,ㅋ ㅋㅋ 😥

 

리액트에서 의미없이 <div> 태그를 사용해서 하위 태그들을 묶는 것보다 <> </> fragment를 사용하는 경우가 많은데 이것 때문이었다. 

 

  const test_code = data.map((item) => {
        return (
            <>
            <li key={item.id}>{item.name}</li>
          <input></input>
          <div>수정하기</div>
          <h5>전체수정</h5>
          </>
        )
    })

문제의 코드,,,ㅠ  발견하고 나니까  어이없었던 실수 😥 이거 왜 안되는지 발견하기 전까지 동료분이랑 이게 왜 이럴까,,, 하다가 발견하고 너무 어이없었던 기억이 ,,,ㅎㅎㅎ 혹시 비슷한 실수를 하고 계신 분께 도움이 되길 바라며 기록!