key prop 누락 경고

리스트 렌더링 시 콘솔에 key 관련 경고가 나옵니다. 버그를 찾으세요:

JSX

function FruitList() {
  const fruits = ['사과', '바나나', '딸기'];

  return (
    <ul>
      {fruits.map(fruit => (
        <li>{fruit}</li>
      ))}
    </ul>
  );
}

답변

map 함수는 ul 안에서 사용할 수 없음 li 태그에 중괄호를 쓰면 안 됨 배열의 문자열을 직접 렌더링하면 안 됨 map으로 렌더링한 각 요소에 고유한 key prop이 없음

로그인 후 제출하기