리액트 에러 해결 Warning Each child in a list should have a unique key prop 에러 해결

문제 상황

Box 컴포넌트 출력은 되는데 Each child in a list should hava a unique “key” prop. 에러가 발생 했다

해결 방안

해결 방안은 단순하다. li 컴포너트에서 unique한 키 값을 원하는데 아래 코드로 생성할 경우 unique한 키 값이 없다.

아래와 같이 들어오는 데이터의 index 등으로 key 값을 만들면 문제 해결!

<Box>
      <Box component="ul">
        {products.map((value, index) => {
          return <Box component="li" key={index}>{value.brand}</Box>;
        })}
      </Box>
 </Box>