Warning: Each child in a list should have a unique "key" prop

오랜만에 TIL작성이다 ㅠㅠ

그동안 ..나태했던 나 자신을 돌아보며 이제 다시 꾸준히 TIL쓰기다 !!

 

우선 map돌리면 key값을 넣어주는 건 알고있었는데..

key값을 넣었는데도 자꾸 저 에러가 떠서 ...스트레스 받던 찰나..

꺄아아아악

CommentList에 key넣어줬자나 !!!!!

 

자세히..보아야 된다..

문제의 코드

 

	return (
		<>
			{data?.length > 0 ? (
				data?.map((v, idx) => {
					return (
						<>
							{index ? (
								<Comment
									data={v}
									key={v.id}
									start={props.startDate}
									end={props.endDate}
									curPage={props.curPage}
									length={data?.length}
								/>
							) : (
								<div className='comment_content_wrap' key={v.memberKey}>
									<OtherComment data={v} />
								</div>
							)}
						<>
					);
				})
			) : (
				<NoData text='작성된 코멘트가 없습니다.' />
			)}
		</>
	);

 

알고보니..

<>

</>

이렇게 감싸준 빈태그에..key값을 넣어야되었던 것이었다..

<> </>는

<React.Fragment key={idx}>와 같다!

 

 

해결 코드

	return (
		<>
			{data?.length > 0 ? (
				data?.map((v, idx) => {
					return (
						<React.Fragment key={idx}>
							{index ? (
								<Comment
									data={v}
									key={v.id}
									start={props.startDate}
									end={props.endDate}
									curPage={props.curPage}
									length={data?.length}
								/>
							) : (
								<div className='comment_content_wrap' key={v.memberKey}>
									<OtherComment data={v} />
								</div>
							)}
						</React.Fragment>
					);
				})
			) : (
				<NoData text='작성된 코멘트가 없습니다.' />
			)}
		</>
	);

단순했다..ㅎㅎ